TechQA.

How to print pdf in chrome but make text inside pdf unselectable?

613 views Asked by At

I need to download the pdf of html page for which i have used chrome builtin, printing feature to save as pdf. However, I don't want my users to be able to simply copy paste the text, No matter if they use image ocr to extract text, they should not be able to easily copy text, how to make this possible?

javascript html pdf pdf-generation printthis
Original Q&A
2

There are 2 answers

4
winner_joiner On BEST ANSWER

A easy / fast solution is to use 'html2canvas' (link to website). You just would have to add the parameter canvas with the value true to the printThis config-parameter, so that it works.

The code would look like this:

   html2canvas(document.querySelector("#page")).then(canvas => {
       $(canvas).printThis({ canvas: true })
   });

Where the html - Element with the idof #page contains the html you want to print/convert to pdf. With other words, it is the same element, on which you would call the printThis function.

Here a JsFiddle: https://jsfiddle.net/vwfb20sp/

window.addEventListener('DOMContentLoaded', _ =>
     html2canvas(document.querySelector('#page'))
     .then(canvas => {
         document.body.appendChild(canvas)
         $('#page').printThis({ 
                canvas: true 
         })
     })
);

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js">
</script> 
<body >
    <div id ="page">
        test
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Amber_mountain_rock_thrush_%28Monticola_sharpei_erythronotus%29_male_2.jpg/1200px-Amber_mountain_rock_thrush_%28Monticola_sharpei_erythronotus%29_male_2.jpg" alt="Amber mountain rock thrush (Monticola sharpei erythronotus) male 2.jpg" />
    </div>
</body>
0
K J On

There is generally no way to dictate how your server clients should behave. so using the example above IF I wish to change the server text or image outputs for my accessibility, such as Reading or text preferences, I can use the browser control of a server offerings like this:-

enter image description here

HTTPS is dis(re)position of hyper text from one ownership to another, The server may pr-offer objects but the client may refuse images (or other content like adverts) and adapt the server offerings to their own tastes.

When using browser for pdf the editor is the clients owned server

enter image description here

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in PDF

Related Questions in PDF-GENERATION

Related Questions in PRINTTHIS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions