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?
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>