If you want to preview a PDF file online, it’s easy to preview a PDF file online. If you want to preview a PDF file online, it’s easy to preview a PDF file online. (what? Compatibility? What is compatibility? (the guy you guys will be, Chrome don’t talk to me)

Originally thought so, unfortunately, the day did not meet people’s wishes, the leadership to demand, we this is to support teaching, learning platform, so the content of PDF need to support replication, and because the teacher to lecture, it is best to support similar PPT playback function…… Regardless of the words, the browser directly open on the support of copy, but the playback function is what ghost yo! (I’m so miserable for a guy)

demo

Import the pdF.js plug-in

1. Download the source package from the official website

Post the address, don’t want to step on the pit to download the stable version of it

2. Add items

Put it in the vue project static directory with the following directory structure:

3. Modify some source configuration

Because PDF.js does not support cross-domain file loading, direct loading will not succeed. The error “File Origin Doesnot Match Viewer” will be reported, so it is necessary to comment out the error line of throwing error in viewer.js file. This modification is made by reading the blog of this elder brother and pasting his article address: link

Projects using

Use it is very simple, put a iframe page, and then the SRC equals to the viewer. The relative path of HTML, then the file = back-end return path to the file ‘/ static/PDFJS/web/viewer. The HTML? File =’ + pdfVisitUrl, and you’re done………. No!! Pit or to climb, of course, the back end return stream file form front-end parsing open of course is better, this can see the blog posted above

1 the pit

Because the server is returning a file link, but in order to keep the file confidential and prevent the link from being copied directly to other people who can open and use this problem, the backend developers have added some time-sensitive tokens after the file link, Then the file link becomes so http://10.20.124.151/group1/M00/00/02/ChR8l1zBdSuAXoATAAvc4itpNIU648.pdf? Token = ee94d7d3b3452c62b18364698839834b, but PDF. Js default allows only the simple paths, because PDF. Js cannot judge token is viewer. The HTML parameters or to preview the file, Therefore, encodeURIComponent encoding is required for the returned file link

<iframe :src="`/static/pdfjs/web/viewer.html? file=${encodeURIComponent(pdfVisitUrl)}`" frameborder="0" class="pdf-window" > </iframe>Copy the code

Well, in that case, the hole’s been crawled

Pit 2

Can I say that at this point, my application is still not running and the page is still black? As a static resource, PDF.js was not recognized and packaged at all, so the relative path could not be found at all. I used NPM run build package to try and found that PDF.js could not be found in the packaged file

const CopyWebpackPlugin = require('copy-webpack-plugin') new CopyWebpackPlugin([ { from: Path. Resolve (__dirname, '.. / SRC/static), / / the path using the static directory relative to the current relative path to js file: config. Dev. AssetsSubDirectory, ignore: ['.*'] // match all files in static directory as static resources}])Copy the code

Save and restart NPM run dev, this time finally ojbK, you can go to sleep

However, later I looked at other versions of VUe-CLI and found that many versions can directly package PDF.js as static resources. Maybe this version of our project is a pit, so if you find static resources can be packaged normally in development, please ignore pit 2.

Look, it’s almost time. Get ready to knock off