简体   繁体   English

如何在chrome中打印pdf但使pdf中的文本无法选择?

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

I need to download the pdf of html page for which i have used chrome builtin, printing feature to save as pdf.我需要下载我使用 chrome 内置的 html 页面的 pdf,打印功能保存为 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?但是,我不希望我的用户能够简单地复制粘贴文本,无论他们使用图像ocr提取文本,他们都应该无法轻松复制文本,如何做到这一点?

A easy / fast solution is to use 'html2canvas' ( link to website ).一个简单/快速的解决方案是使用“html2canvas”(网站链接)。 You just would have to add the parameter canvas with the value true to the printThis config-parameter, so that it works.您只需将值为true的参数canvas添加到printThis配置参数,它就可以工作。

The code would look like this:代码如下所示:

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

Where the html - Element with the id of #page contains the html you want to print/convert to pdf.其中 html - id#page的元素包含您要打印/转换为 pdf 的 html。 With other words, it is the same element, on which you would call the printThis function.换句话说,它是同一个元素,您将在其上调用printThis函数。

Here a JsFiddle: https://jsfiddle.net/vwfb20sp/这里有一个 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>

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:-因此,如果我希望更改服务器文本或图像输出以实现可访问性,例如阅读或文本首选项,则使用上面的示例,我可以使用服务器产品的浏览器控件,如下所示:-

在此处输入图像描述

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. HTTPS 是将超文本从一个所有权转移到另一个所有权,服务器可能会提供对象,但客户端可能会拒绝图像(或广告等其他内容)并根据自己的口味调整服务器产品。

When using browser for pdf the editor is the clients owned server当使用 pdf 浏览器时,编辑器是客户拥有的服务器

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM