URLs appear when saving/printing to pdf
I'm viewing a webpage that has several links. When printing the webpage to pdf using Firefox, the links magically display their full URLs, blocking the contents of the page. How can this be prevented? This does not happen when using MS Edge. Please see the attached screenshot. The top image is from a pdf printed using Firefox, and the bottom is from a pdf printed using MS Edge. 91.8.0esr (64-bit)
Modified
Chosen solution
Okay, let's reset to baseline.
I don't know what site that is, but let me describe a common pattern. The site's style sheet has a rule that adds the URL next to the normal link text for printing only. For example:
@media print { a[href]::after { content: ' (' attr(href) ')' } }
This idea originally was used with links in body text, and it works reasonably well there, but adding it to every link on a page including navigation blocks is irritating.
It is difficult to give a universal method for overriding this because site styles may differ. Assuming you don't want any URLs tagged on to links that way, an overriding style rule such as the following could work:
@media print { a[href]::after { content: '' !important } }
On some sites, that also may clear icons/images tagged onto links -- there's no way to easily distinguish. Maybe it's an acceptable trade-off for having a quick fix.
Could you test this on the page where you're having the problem:
(1) Open the Style Editor using Shift+F7
Firefox displays the style sheets in the page, which may be numerous.
(2) Above the list of style sheets in the left pane, click the + button to create your own
(3) Firefox should open the new sheet and position the cursor in the editor. Paste your overriding rule into the blank editor.
@media print { a[href]::after { content: '' !important } }
(4) Test whether it resolves the printing issue.
Of course, you don't want to be doing that multiple times a day, and some sites actually make it difficult to open the developer tools panel. This rule can be inserted by a script "on demand" when you notice the problem (using a bookmarklet, details to follow if desired), or automatically on all sites by a styling add-on (such as Stylus).
Read this answer in context 👍 0All Replies (7)
Is there a reason for the old version of Firefox? Can we get the steps to replicate the issue? https://www.mozilla.org/en-US/firefox/all/#product-desktop-release
Modified
When you use "Save to PDF" as your destination, Firefox generates the PDF internally using its own converter, similar to using "Save as PDF" as your printer in Edge. Both embed live links.
You can either
(A) Print to a PDF printer, for example by setting the Destination to "Microsoft Print to PDF" -- then you can use "Save to PDF" when you do want embedded links
(B) Make a change under the covers to turn off link embedding for "Save to PDF"
For B:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
More info on about:config: Configuration Editor for Firefox. The moderators would like us to remind you that changes made through this back door aren't fully supported and aren't guaranteed to continue working in the future.
(2) In the search box in the page, type or paste print.save_as_pdf.links.enabled and pause while the list is filtered
(3) Double-click the preference to switch the value from true to false
Sorry, I didn't look at your screenshot. This is caused by the web site's style sheet and there isn't an easy way to disable that in Firefox. I don't know why Edge is ignoring the style sheet. Interesting.
Thank you for your reply, jscher2000. To be clear, I do File > Print > Destination. I then have 3 options: "Save as PDF" "Microsoft print to PDF" and "HP laserjet", none of which work. I messed with the other options such as "Print backgrounds" "don't print backgrounds" etc., but nothing. Just for kicks I tried your suggestion (B) and tried setting the permissions.default.image value to 2, and it got rid of the images to which the links were attached, but the links themselves still appeared. I could simply use Edge for making these PDFs, but it has another problem where it changes the font on its own from one page to the next!
Chosen Solution
Okay, let's reset to baseline.
I don't know what site that is, but let me describe a common pattern. The site's style sheet has a rule that adds the URL next to the normal link text for printing only. For example:
@media print { a[href]::after { content: ' (' attr(href) ')' } }
This idea originally was used with links in body text, and it works reasonably well there, but adding it to every link on a page including navigation blocks is irritating.
It is difficult to give a universal method for overriding this because site styles may differ. Assuming you don't want any URLs tagged on to links that way, an overriding style rule such as the following could work:
@media print { a[href]::after { content: '' !important } }
On some sites, that also may clear icons/images tagged onto links -- there's no way to easily distinguish. Maybe it's an acceptable trade-off for having a quick fix.
Could you test this on the page where you're having the problem:
(1) Open the Style Editor using Shift+F7
Firefox displays the style sheets in the page, which may be numerous.
(2) Above the list of style sheets in the left pane, click the + button to create your own
(3) Firefox should open the new sheet and position the cursor in the editor. Paste your overriding rule into the blank editor.
@media print { a[href]::after { content: '' !important } }
(4) Test whether it resolves the printing issue.
Of course, you don't want to be doing that multiple times a day, and some sites actually make it difficult to open the developer tools panel. This rule can be inserted by a script "on demand" when you notice the problem (using a bookmarklet, details to follow if desired), or automatically on all sites by a styling add-on (such as Stylus).
Oh wow, it worked!
Thank you so much jscher2000, the pages now print to PDF without the links overwriting the page!
A follow-up question, is there something I can add to
@media print { a[href]::after { content: !important } }
that will make the font size of everything on the page about 5% larger?
Modified
firefoxq said
A follow-up question, is there something I can add to @media print { a[href]::after { content: '' !important } } that will make the font size of everything on the page about 5% larger?
Hmm, maybe. I guess this is a very wide page that Firefox is shrinking to fit (automatic scaling in the "More settings" section)? In that case, it's possible that the normal shrink-to-fit would counteract the enlargement. You might need rules that target the specific structure of the page and which is too complicated to guess at from a screenshot, unfortunately.