Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

To illustrate:

<a href="https://www.google.com">Google anchor link</a>

on the website, it displays as: Google anchor link

When printed, it shows as:

Google anchor link(https://www.google.com)

To address this issue, I included in the CSS:

@media print {
    a:link:after,
    a:visited:after {
        content: "" !important;
}}

Now while printing, it appears as: Google anchor link (the link is not displayed after the anchor).

The dilemma:

If instead of a standard printer, a virtual printer (such as doPDF) is used to generate a .PDF file from the page, the anchor link loses its functionality and is presented only as text: Google anchor link.

Having clickable anchor text in a .PDF file should be feasible, considering numerous .PDF files featuring "clickable anchor links".

Answer №1

After searching, I've found the solution. Sharing to assist others!

When it comes to virtual printers, like doPDF, keep in mind that some may not print hyperlinks while others (premium) do offer this capability.

The optimal method for printing webpages as PDF directly is through Google Chrome (I was surprised to learn that Google Chrome has built-in features for this - no need for any extensions).

To achieve this, simply press Ctrl+P in Google Chrome, adjust the destination, and select => Save as PDF (ensuring that all hyperlinks remain clickable within your generated PDF file).

You can save web pages as PDF files directly using Google Chrome without having to install any PDF drivers or additional extensions.

Refer to the attached image for guidance!

https://i.sstatic.net/Rre26.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining user roles from server without using JWT tokens

My main objective is to provide user roles from the backend. For instance, if a user wishes to access resources in my backend, they can log in using Google credentials. The Angular app retrieves the access token from the Google authorization server and s ...

A proposal for implementing constructor parameter properties in ECMAScript

TypeScript provides a convenient syntax for constructor parameter properties, allowing you to write code like this: constructor(a, public b, private _c) {} This is essentially shorthand for the following code: constructor(a, b, _c) { this.b = b; thi ...

Troubleshooting issues with static serving in Express.js

I'm facing an issue while trying to apply a bootstrap theme to a file created using Jade. The error message indicates that it cannot GET the file. Main JavaScript code snippet: const express = require('express'); const app = express(); ap ...

Sorting Tables through the Power of Drag and Drop

While utilizing both the Jquery Tablesorter plugin and the Drag and Drop plugin together, everything seems to be functioning correctly. However, when attempting to use the serialize function of the tableDnD, an error message stating "empty string getElemen ...

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

Implementing Bootstrap 4 in an Angular 9 project without the use of JQuery

Currently, I am actively working on detaching all JQuery dependencies within my Angular project. Most of the dependencies stem from utilizing Bootstrap 4 components. Eliminating dropdowns and removing all instances of data-*** seemed to help in this proc ...

Include a sharing option within the magiczoomplus feature

My current project involves creating a WordPress site using Artisteer along with several plugins to showcase photo galleries. To enhance the user experience, I purchased an e-commerce WordPress theme which features a share button that I really like. Now, I ...

How can I retrieve properties from a superclass in Typescript/Phaser?

Within my parent class, I have inherited from Phaser.GameObjects.Container. This parent class contains a property called InformationPanel which is of a custom class. The container also has multiple children of type Container. I am attempting to access the ...

Deliver Compressed Files following Angular CLI --Prod Configuration

After using the Angular CLI's command to minify my basic Angular app, a dist folder was generated with the project folder and minified files. However, when I run ng serve, it always serves the unminified development files, whether it's in the roo ...

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

Is Jquery struggling to modify the visual enhancements?

Check out this link, I need the sidebar design to be similar to what is shown in the provided link. Furthermore, I am looking for a way to have a pointer that follows along with my selection on different labels such as home, charts, etc. Can anyone assis ...

Utilize the JSON response upon successful completion of an AJAX request

I'm currently working with this code snippet: function openIzmeni(value) { $.ajax({ url: "getRzaizmenu.php", type: "POST", async: true, data: { vrednostid:value}, //your form data to post goes here as ...

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Currently, I am working with two parent flex items, arranged with flex-direction: column. Within the first parent, there are two children. However, one of the children is optional and may be removed at times. I aim to have the optional child displayed on ...

Unable to modify attribute within $templateCache through an AngularJS Directive

Here is my Directive code: module.directive('iconSwitcher', function() { return { restrict : 'A', link : function(scope, elem, attrs) { var currentState = true; elem.on('click', function() { ...

Integrating fresh components into a JSON structure

I've been attempting to insert a new element into my JSON, but I'm struggling to do it correctly. I've tried numerous approaches and am unsure of what might be causing the issue. INITIAL JSON INPUT { "UnitID":"1148", "UNIT":"202B", "Sp ...

Automatically launching a new tab upon page load in a React application

I have a specific requirement that when a form is loaded, a new browser tab should automatically open with a URL based on one of the attributes. After researching some solutions on various platforms like Stack Overflow, I came across this helpful thread: M ...

What could be the reason behind the malfunctioning of $.getjson?

I've been facing issues trying to access remote json data. Initially, I resorted to using as a temporary fix but it's no longer serving the purpose for me. As of now, I am back at square one trying to resolve why I am unable to retrieve the remo ...

Replacing data in a Node server

I am currently working on a server that temporarily stores files in its memory before uploading them to the database. Below is the code snippet I'm using: uploadImage(file, uid, res) { var fs = require('fs'); mongoose.connect(config ...

Automated file uploading with AJAX on Firefox

After inserting a row into the database, I want to automatically upload a PDF/XML file with no user involvement. The script should be able to identify the filename and location of the file. Is there a method to achieve this task? Share your ideas in the a ...

Specific solution in responsive design queries

Looking to modify the style of a div based on screen resolution. Here is an example: @media only (width: 320px){do something} I attempted using this code but it was not successful. Appreciate any assistance! ...