My company has a web application that outputs a PDF which we print on label paper (stickers with product data).
Chrome is the default browser around here. Unfortunately, when we try to print from Chrome the "Fit to Page" checkbox is automatically selected. This screws up the alignment and prints data in the wrong places. If we uncheck 'Fit to Page', it prints perfectly on all machines.
If I skip the Chrome Print dialog and use the system one, it works fine on a Mac, but poorly on Windows machines.
I would really like a way to disable the "Fit to Page" option.
What I've looked at:
Printing Avery 5160 labels with FPDF - I added /ViewerPreferences << /PrintScaling /None >> to my pdf, but this article Set PDF to print with no scaling says that it's controlled by the application (Chrome in my case).
http://productforums.google.com/forum/#!topic/chrome/REy2n67B1fM --not helpful
https://code.google.com/p/chromium/issues/detail?id=158752 --not helpful
So I'm afraid that I may need to find or make a Chrome extension to do this. Before I dig into that, does anyone know if it's even possible?
Other Facts:
PDF is being generated by fpdf in php. All computers should be using latest vs of Chrome.
I hate to say this but, could you try opening the PDF in a different browser, or use a standalone PDF reader application?
Since the Chromium team has labelled this as a WontFix, Chrome simply might not suffice for your needs.
Related
When a website visitor uses their computer's "Microsoft Print to PDF" printer (or some other PDF printer on their computer) to print content from a website, the text of the resulting pdf is not selectable, almost as if it is a scanned image, not printed text. I came across this issue when a user of a website I managed asked about this. We had recently launched a new site and this behavior became apparent to the user. However, as I dig into it further, it doesn't appear to be specifically related to our site as I was just able to repeat it using Chrome and Microsoft's Print to PDF function. Is this pdf printer issue, CSS issue or something else?
Sample pdf (Windows 10, Chrome, Microsoft Print to PDF)
Proven solution: instead of choosing 'print to pdf', use 'save as pdf' from the drop-down list after right-clicking 'print' on the web page
It's not a problem with the CSS - this is a known bug in Microsoft's Print to PDF feature.
As of right now it is recommended that you use some other tool, such as Adobe Reader which tends to work better than Edge or other PDF readers and has a print function explained in tutorial.
Additional Material:
Microsoft Print to PDF makes text unselectable in Vector PDF and Hyperlinks unclickable.
Print to PDF generating bloated but unsearchable PDF files
I've come across an interesting bug either in Google Chrome, or less likely in how Windows 7 clipboard application. The bug happens when performing a copy (Ctrl+V) on selected browser rendered CSS + HTML containing a mix of text and images and more specifically occurs when the image in this situation is coded to contain multiple copies of different sizes. I need help verifying which app is the culprit (the browser or the clipboard) and ideally a fix if there is one (i.e. a registry edit perhaps).
There may be some security risks raised by this depending on how this behavior plays out.
Discovery
Let me begin with how I first observed this bug in OneNote 2016....
I sometimes save articles I come across in OneNote for later reading. I'm using a locally installed OneNote 2016 copy on Windows 7 Enterprise SP1 (64-bit). As it's an enterprise copy, the official Web Clipper extensions aren't an option, so I just copy the articles manually when the urge strikes.
Curiously I found that when I select a large block of text and copy and paste it, the images sometimes appear lower quality in OneNote than they do in my web browser.
As a case study, I was trying to copy this article manually: Meet the frail, small-brained people who first trekked out of Africa.
When copying as a block of images + formatted text (in browser: highlight the desired region, Ctrl+C; Ctrl+V in OneNote 2016) the image difference is immediately notable. What I discovered is that if I right-click just the article image and chose Copy image and then paste in OneNote using specifically right-click, Paste options: > Picture (U) (the rightmost one), I get a much higher resolution image.
Here's an example, with the image repasted above its occurence from the original bulk paste.
Digging into the web code, I believe I've figured out why. The issue occurs when there's multiple copies of the same image listed in some sort of variable style that I'm assuming is used to accommodate different screen resolutions or perhaps layouts specific to mobile versus PC.
The image URLs are contained in the <img... tag in the code below:
<figure class="figure">
<img sizes="" src="http://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/gg_61125N_FirstHumans_BottomPart.png?itok=d0BdUhJK" srcset="http://www.sciencemag.org/sites/default/files/styles/inline__450w__no_aspect/public/gg_61125N_FirstHumans_BottomPart.png?itok=d0BdUhJK 1w, http://www.sciencemag.org/sites/default/files/styles/inline__699w__no_aspect/public/gg_61125N_FirstHumans_BottomPart.png?itok=j9n6dGdk 700w" /> <figcaption>
<div class="caption"></div>
<div class="credit">
Garvin Grullón
</div>
</figcaption>
</figure>
The difference in pasted images is more glaring when it happens with vector-graphic type images, which I believe is likely the byproduct of taking the vector graphic dumped to *.png and then resizing it in photo-editing software by news folks (kind of defeating the point of vector graphics), hence butchering the rescaled resolution.
I show a couple instances of the overall OneNote copy/paste issue, below to illustrate:
Scope
Testing further I've found this bug appears to be common to all Office 2016 programs (tested on Word 2016 and PowerPoint 2016) when copying blocks of text and images that contain <img ...> content w/ multiple URLs in the tag.
Also I discovered that when directly pasting images via the right-click > Copy image strategy, only the Picture (U) option in Paste Options pastes the correct higher res image, matching what's displayed in the browser. Keep Source Formatting (K) and Merge Formatting (M) will interestingly still paste the lower res copy, even with this strategy.
Now the browser (Chrome Version 54) is displaying the proper copy, which leads me to try testing the same article and copy & paste method in Internet Explorer 11.0. In IE 11 it loads the proper highest resolution image (as so too does Chrome Version 54), but unlike Chrome, when bulk copying and pasting from Internet Explorer 11 to OneNote 2016 using that same article, magically the highest resolution image is properly pasted.
That has me thinking the bug in Chrome browser copy & paste.
Indeed, I may have confirmation of this, as in Adobe Pro (which is my only other locally installed rich media software with a clipboard paste option to my knowledge), choosing pasting from the clipboard (in Edit mode: Pages (right menu pane, second from top) > More Insert Options (under the Insert Pages section) > Insert from Clipboard) and then copying and pasting the image in the resulting block into MS Paint, I see it is indeed still the lower res image, as in Office 2016.
Hence I've discovered that the scope is not only OneNote 2016 or Office 2016, but rather all local rich media apps including both Microsoft's own apps and third party apps from Adobe, etc. That said, I'm still not 100% confident that I can pin the bug on Google Chrome as it's possible albeit perhaps less likely that the issue lies in Windows 7's clipboard application, as that too would explain the universal affect on local rich media paste attempts.
Looking one more time at that img tag, I do see that the srcset attribute is a somewhat new attribute addition to the img tag which when used is termed a "Responsive Images". The feature was announced by the W3C Working Group in 2014 and per my reading most third party mobile and PC browsers claim support for it. As I suspected is used with CSS to target different platforms... it appears the large dichotomy in resolution between so-called "Retina" (high-resolution) displays like those in Apple's mobile devices and low-end displays found in budget Android devices and budget PCs in part inspired this attribute's addition.
Humorously, the diagnostic site "Can I Use" lists the img srcset attribute as not working in Internet Explorer 11 and working in Google Chrome version 54. In this case the irony is that the opposite appears to be true for this use case -- Chrome 54's copy is not working correctly while copying from Internet Explorer 11 is correctly parsing the Responsive Image.
That still doesn't tell us for sure whether it's the browser or the clipboard application, but it's certainly something I find interesting to note, given that it suggests a critical missing piece of Can I Use's testing methodology (or that of whoever they get their data from -- haven't checked into that yet) as copy & paste seemingly is a common use case for rich content.
Questions
To recap and conclude, I've tracked down the scope, but the following remain unsolved questions
Which app is responsible -- Windows 7's clipboard app or Google Chrome?
For the offending app, is there a registry setting that I can tweak to have the bulk copy and paste grab whatever image the browser is displaying?
Also, to recap the earlier thought if the bug is in Google Chrome, there could be some interesting security reprecussions perhaps, as you're perhaps loading URL content into the operating system's clipboard application that doesn't match the rendered content in the browser window.
I have created a html page with bootstrap control and my own css. I am running the page through visual studio in chrome. I want this page to get converted into pdf with colours as it is displayed in chrome. I have not connected any printer to my system. If i give ctrl+P, my page is getting displayed without colours.
I have used 'save as pdf' extension of chrome for conversion.
It is saying 'cant access your local url'. Is there a way to print the page in the same way as it is seen in browser as a pdf
Bootstrap controls like progress bar not getting appeared in print.
Chrome “Save As PDF” works fine. You need to tick the “print background graphics” checkbox otherwise by default backgrounds are ignored.
However, the problem is that Bootstrap has included a reset for print media. What it does is to overwrite all background to white and foreground color to black, with !important.
What kills is the !important
I would recommend you to use one of the free online HTML-to-PDF conversion solutions.
Here's one for example: http://www.htmlpdf.com/
Keep in mind that some solutions may not give you the expected results. In this case just try another.
After you have found a working solution, just print the converted-HTML-to-PDF file that you downloaded.
Chrome itself acts as a pdf writer and reader, as we already know. I'm not sure why the colours are missing in the preview for printing, still, give this a try:
After Ctrl+P, you'll see the Print - Cancel options, below which there is a Destination for you to choose.
It has Recent, Local and Cloud destinations with a choice from the local ones being displayed. Go ahead and change it to Save as pdf.
Now you can save the whole webpage with the colours too.
Take a look at this
I had the same issue but found an easy solution.
Simply get the google chrome extension called : FireShot
Get it here: https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en
It will take full page screenshot of your HTML page and even local Html pages.
Then capture the full page.
After it will lead you to a new page with saving option.
Beside “Email” I suggest you to click on “PDF”. Then it will lead you to Gmail so you can send yourself the PDF.
I don’t suggest to click on print, because in my case when I saved it, there was an issue with the pixels.
Very easy.
GoFullPage - Full Page Screen Capture — works great for this case.
So here's the story. At my company, you can access previous pay statements online via a payroll website. When you go to look at a statement, it will open the statement in-browser via a pdf viewer. When working properly, it will usually ask if you want to blank out all the data or not (which... why would you want to? the point is to look at your statement). Now, this worked fine when checking it out in Adobe Reader; you'd just click "yes, show data" and everything displays fine, it can be printed, etc. But the company decided that instead of getting Acrobat for editing pdf files, that the better (cheaper) option is to get a cheap/free alternative called "Nuance" something or other. Two users installed this program, and now the browsers open pdfs in-browser with Nuance instead of Adobe Reader. This is a problem, because Nuance doesn't show the option of hiding or showing data like Reader did; rather, it just chooses the "no" option, which results in a blank template pdf coming up.
Now, this whole problem could be solved if we could just get the browsers to use Reader to open pdf files in-browser... obviously it's not a problem if you could download the pdf, but the site doesn't seem to allow you to download the pdf files. We've tried just about everything we could think of, short of uninstalling Nuance altogether, to get IE or Chrome to open pdf files with Reader, but even with a full IE reset, it uses Nuance to open pdfs inside the browser. Changing the default program for pdfs has yielded no results, IE still uses Nuance in-browser.
Anyone have any thoughts on how to change IE or Chrome to default to using Reader to show pdf files instead of Nuance?
Thanks!
just change the default programs or applications that opens pdf files, make it the adobe reader. You'll have to configure it in Windows, the Default Programs in Control Panel. You'll have to do this in each computer.
A lot of tutorials which can be downloaded have the file type of .chm, .pdf, .html, etc. I downloaded a Java SE tutorial of Java SE in HTML format. When I use chrome to view it and everything is good. But I just wonder how could I just directly highlight some useful information (e.g. text) when I use chrome to view it? The html files are local, I know that I could use some software to edit it, like using HTML tag <font color:> etc.
But I just want to highlight it directly in the browser like editing it in word. Is there any suggestion? Dose chrome support such kind of plugin? If you still don't understand what i mean, please refer to "clip to evernote", which is a plugin of chrome and can cut the pages and upload them to the evernote server. when I use evernote client to read them, I can directly highlight some words which is useful to me.
It's much more a SuperUser question, but ... There is a lot of plugins for highlighting web pages out there. You could try Yawas or Simple Highlighter
edit: ok, I think I understood better your problem ... Yawas, Simple Highlighter, as well as most other highlighters, don't hightlight on local pages.
I'm not sure there is such an highlighter available for Chrome, then. What I would suggest is to try opening you documentations with Amaya instead of Chrome. It's both the Browser and the Editor from the W3C; and since it has both functionalities, you probably will be able to do what you want on your local pages.
You can save it to your computer by clicking "Open a new tab containing a list of highlights and notes on just this page". Then you can save only the html contents to your computer with the name as you like. Don't try to use ALT to save the list of note because you will never see the contents what you want to save.