下载pdfjs
首先下载pdfjs,http://mozilla.github.io/pdf.js/getting_started/#download
下载后的文件,可以在vue项目的public下新建一个文件夹(我这叫pdf),把下载解压好的文件放进文件夹里,要展示的PDF文件也一起放在public下
![](https://i-blog.csdnimg.cn/blog_migrate/565db7927ea03c528ca9373f2ee2fbae.png)
实现本地pdf预览
<template>
<div>
<h1>PDF</h1>
<el-button type="primary" @click="previewPDF">预览PDF</el-button>
<el-dialog
title="预览"
:visible.sync="dialogVisible"
width="80%"
:before-close="handleClose">
<iframe
class="pdf-viewer"
:src="`/pdf/web/viewer.html?file=${pdfFileUrl}`"
>
</iframe>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="dialogVisible = false"
>确 定</el-button>
</span>
</el-dialog>
</div>
</template>
说明 =>
:src="`/pdf/web/viewer.html?file=${pdfFileUrl}`"
/pdf/web/viewer.html :为插件viewer.html的地址
pdfFileUrl: 为需要预览的pdf文件的地址
<script>
export default {
data() {
return {
dialogVisible: false,
pdfFileUrl: '', // pdf文件地址
}
},
methods: {
previewPDF() {
this.dialogVisible = true
let index = window.location.href.indexOf('#')
let windowHref = window.location.href.substring(0, index - 1)
this.pdfFileUrl = `${windowHref}/lizhi.pdf`
},
},
}
</script>
<style>
.pdf-viewer {
width: 100%;
height: 80vh;
}
::v-deep .el-dialog {
border-radius: 6px;
}
</style>
线上预览
将this.pdfFileUrl 更改为 后端返回的地址即可
<script>
export default {
data() {
return {
dialogVisible: false,
pdfFileUrl: '', // pdf文件地址
}
},
methods: {
previewPDF() {
//发起请求
...
this.pdfFileUrl = `{{ 后端返回的pdf地址 }}`
},
},
}
</script>