In front-end development, we often need to preview pdf files. Here are several common ways to preview pdf files:
1: Directly open the browser
If the project does not have high requirements for the preview function of pdf, but only needs to be able to view it, you can directly open the address of the pdf file on the browser, the code is as follows
const pdfUrl = "xxx" // pdf路径
window.open(pdfUrl)
Two: open via pdf.js
PDF.js is a JavaScript library developed by Mozilla for rendering and manipulating PDF documents on the web. It is an open source project and can be used in any modern browser. If your project is running on the PC side, this plugin is a good choice, but it has compatibility issues with the mobile side. Proceed as follows:
1. Import the pdf.js file
official website address: https://mozilla.github.io/pdf.js/ , as shown below:
After downloading, there is such a directory structure. We mainly use this viewer.html, which is a sample page provided by the pdf.js library for displaying and browsing PDF documents. It provides a complete PDF reader interface, including various functions and tools. If you need to customize the displayed page, you can also write a page yourself. If you don’t need it, just embed it directly with the iframe tag. In the vue project , we can put this folder in the public/static folder, and then access it through the /static/pdf/web/viewer.html path, the code is as follows:
<iframe v-if="pdfUrl" src="/static/pdf/web/viewer.html" width="500" height="500"></iframe>
When this happens, the pdf.js plug-in is introduced successfully
2. Show our own pdf
What we just showed is the default file of the pdf.js plug-in. Now we need to show our own pdf file. There are two ways to get the pdf file here. The first one is to give us a pdf file directly from the backend. The address, the second is the file stream of the pdf returned to us by the backend through the interface, the following are the codes of the two methods:
The first method: preview directly through the file address
<template>
<div>
<div> <button @click="showPdf">点击显示pdf</button> </div>
<iframe v-if="pdfUrl" :src="'/static/pdf/web/viewer.html?file='+ pdfUrl" width="500" height="500"></iframe>
</div>
</template>
<script>
export default {
data(){
return {
pdfUrl: ""
}
},
methods: {
showPdf(){
this.pdfUrl = "xxxxx" // 你的 pdf 文件地址
}
}
}
</script>
The code is like this, but if it is in a different domain, the following error will be reported:
This is because it can only view pdf files under the same domain name by default. The solution is to modify the source code of the viewer.js file and comment out this place (I This version is in line 1653-1655)
After commenting out here, you should be able to preview the pdf file. If you still report cross-domain problems, you can find a backend solution . The following is a cross-domain error picture:
This kind of problem is solved by looking for the back end.
The second way is to return the file stream to preview through the back-end interface. The following is the code:
<template>
<div>
<div> <button @click="showPdf">点击显示pdf</button> </div>
<iframe v-if="pdfUrl" :src="'/static/pdf/web/viewer.html?file='+ pdfUrl" width="500" height="500"></iframe>
</div>
</template>
<script>
import axios from 'axios';
export default {
data(){
return {
pdfUrl: ""
}
},
methods: {
showPdf(){
axios({
method: "get",
responseType: "blob",
url: "xxx" // 接口路径
}).then(res => {
console.log(res)
let blob = new Blob([res.data], {
type: 'application/pdf;chartset=UTF-8'
})
this.pdfUrl = URL.createObjectURL(blob) // 这个方法会创建一个临时的路径用于访问文件
})
}
}
}
</script>
In this way, the pdf file stream returned by the backend can be previewed.