Shulou(Shulou.com)06/02 Report--

This article mainly explains the "vue uses pdf.js to preview pdf files what is the method", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "vue uses pdf.js to preview pdf files what is the method" it!

When we preview pdf on the page, because some files cannot be printed and downloaded, it is difficult for us to meet customer needs when we use the pdf that comes with window, so we need another way to support our preview of pdf files under special conditions, here I use the introduction of pdf.js files to achieve the purpose.

Step 1: download pdf.js

Import pdf.js file

The address is: http://mozilla.github.io/pdf.js/getting_started/

The second step is to introduce vue

Here, I put the downloaded files under the piblic of the root directory.

Step 3, use the

The main reason is that the address "/ build/generic/web/viewer.html?file=" + href,href is the file path returned by the request backend or the file path generated by the parsing of the first segment of the file stream returned by the backend, and the / build/generic/web/viewer.html?file=, address is concatenated in front of it to introduce the path to the pdf.js file. You can also write / build/generic/web/viewer.html directly, and he will look for it directly. Below I use the previous paragraph parsing the file stream to generate the address preview.

Preview method window.open ("/ build/generic/web/viewer.html?file=" + href)

Axios ({method: 'get', url:url, headers: {"token": auth,}, responseType:' blob',}) .then (response = > {type_ = type_.toLowerCase () If (type_ = = "docx") {that._type_ = "application/vnd.openxmlformats-officedocument.wordprocessingml.document"} else if (type_ = = "doc") {that._type_ = "application/msword"} else if (type_ = = "gif") { That._type_ = "image/gif"} else if (type_ = = "jpeg" | | type_ = = "jpg") {that._type_ = "image/jpeg"} else if (type_ = = "png") {that._type_ = "image/png"} else if (type_ = = "pdf" ) {that._type_ = "application/pdf"} else if (type_ = = "txt") {that._type_ = "text/plain" Charset=utf-8' "} else if (type_ = =" xls ") {that._type_ =" application/vnd.ms-excel "} else if (type_ = =" xlsx ") {that._type_ =" application/vnd.openxmlformats-officedocument.spreadsheetml.sheet "} else if (type_ = =" zip ") ) {that._type_ = "application/zip"} else if (type_ = = "ppt") {that._type_ = "application/vnd.ms-powerpoint"} else if (type_ = = "pptx") {that._type_ = "application/vnd.openxmlformats-officedocument.presentationml.presentation" } if (type_ = = "pdf") {var blob = new Blob ([response.data]) {type: that._type_}) var href = window.URL.createObjectURL (blob) / / create a download link window.open ("/ build/generic/web/viewer.html?file=" + href);}})

Last

If you want to disable downloading, printing and other functions of pdf files, the easiest way is to find the viewer.html in your import file, and the path is viewer.html in web under the generic folder under build, as follows:

In this html to find the corresponding download dom can be directly display:none, remember not to comment out, note will report an error. Below, in the red box, one is to download and the other is to print, which can be hidden directly.

If someone asks that this is not safe, then you can discuss with the customer not to display on the page, because as long as the page can see things, screenshots can also be taken, it is doomed to be unsafe.

Thank you for your reading, the above is the content of "vue uses pdf.js to preview pdf files". After the study of this article, I believe you have a deeper understanding of what vue uses pdf.js to preview pdf files. Specific usage also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.