How to use pdf.js to preview pdf files in Vue

When we preview PDF on the page, some files cannot be printed or downloaded. At this time, it is difficult to meet customer needs by using the PDF that comes with Window. Therefore, we need another way to support PDF file preview under special conditions. Here I use the form of introducing pdf.js file to achieve the purpose.

Step 1: Download pdf.js

Import pdf.js file

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

The second step is to introduce Vue

I put the downloaded files in the root directory of piblic

Step 3: Use

The main address is "/build/generic/web/viewer.html?file="+href, where href is the file path returned by the request backend or the file path generated after the front-end parsing of the file stream returned by the backend. /build/generic/web/viewer.html?file= is added to the front. The address is the path of the pdf.js file you introduced. You can also write /build/generic/web/viewer.html directly, and it will go directly to find it. Below I use the front-end parsing 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 download link window.open("/build/generic/web/viewer.html?file="+href);
                }
            })

at last

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

Find the corresponding downloaded DOM in this HTML and just set display:none. Remember not to comment it out, or an error will be reported. As shown below, in the red box, one is for downloading and the other is for printing, just hide them.

If someone asks whether this is also unsafe, you can discuss with the client not to display it on the page, because anything that can be seen on the page can also be captured by screenshots, which is bound to be unsafe.

This is the end of this article about vue using pdf.js to preview pdf. For more information about vue using pdf.js to preview pdf content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!