JS disable the browser PDF printing and downloading functions (pdf.js disable the printing and downloading functions)

The front-end implementation pdf Preview method

(1) use iframe label src=" File address " You can open it directly , You can also set width,height Equal attribute . Specific reference iframe attribute .

 <iframe src="http://localhost:8080/%E9%9F%A6%E6%88%90%E7%8E%89.pdf"></iframe> 

（2) direct a label src=" File address "

<a href=" File address "></a>

（3） Using Microsoft's methods Microsoft official documents （ It is not recommended to use if there are defects ）

（4） The use of plug-in

vue in Realization pdf preview

above 1,2,3 You can use , but 1,2,3 It uses Browser's own pdf Preview function , The styles are not uniform , If you mind Just Using plug-ins .

4 The plug-in has  vue-pdf、pdf.js etc. .

react in Realization pdf preview

above 1,2,3 You can use , but 1,2,3 It uses Browser's own pdf Preview function , The styles are not uniform , If you mind Just Using plug-ins .

4 The plug-in has  react-pdf、pdf.js、react-file-viewer etc. .

React Use in react-file-viewer, Implementation preview office file （pdf,word,xlsx Wait for the documents ） The front-end implementation , Open file in browser _ Cub Gu Yu's blog -CSDN Blog _react-file-viewer

Ban pdf Printing function  

Use the plug-in api

pdf.js Ban

adopt pdfjs Realize in VUE-CLI In the middle of PDF preview , And disable the printing and downloading functions _qq_24800489 The blog of -CSDN Blog _iframe preview pdf File stream

Other plug-ins Be the same in essentials while differing in minor points , You can do it yourself Check information .

use js Ban

  In fact, this is not forbidden , It's just hold Button And icons Hide the .

1. With Google Chrome comes with an example

The quick way to open it is Drag the pdf Go to browser You can see it in the library . 

​

Ideas ： Namely use js Hide downloaded Icon

    Get Icon Give it hide

    This step looks like Simple however I started I've tried many times but I can't , because involves shadow-root

  The screenshot is as follows ：

Review element Will find dom By shadow-root The parcel , therefore Get elements You can't use conventional document Method , Need to use shadowRoot.

 let c = document.querySelector("#viewer").shadowRoot.querySelector("#toolbar").shadowRoot.querySelector("#print");
    c.remove();

Run this code Will find The printed icon disappeared , If you download it, you should also disappear Just use the same method . 

  Get... Quickly Want elements js Code tricks ：

   1. Selected elements then Right mouse click  

   2. choice copy Inside copy js path that will do

 Copy js path Copy js route   Quickly generate obtain The dom Of js Code （ Very practical ）

  The effect is as follows ：

  Like want to download The icon also disappears According to the above step I can get it . then Can Add remove perhaps Modify the style , Any modification is OK .

document.querySelector("#viewer").shadowRoot.querySelector("#toolbar").shadowRoot.querySelector("#downloads").shadowRoot.querySelector("#download");

2. edge Also almost  

 edge All are The operation steps in Chinese are the same as above

1. Selected elements then Right mouse click  

2. choice Copy   Inside Copy js route that will do

  Removal effect as follows ：

summary ：

I This is just Hide the , You can get the element next expand such as ： Change icon , Modify the style wait .

Google browser Console tips