vue实现预览pdf组件(vue-pdf插件使用)
组件PriviewPdf简易版<template><div class="priview-pdf-img"><pdf :pdfUrl="pdfSrc"></pdf></div></template><script>import pdf from 'vue-pdf'export default {name: 'pri
·
组件 PriviewPdf
- 简易版 (页尾是完整版)
<template>
<div class="priview-pdf-img">
<pdf :pdfUrl="pdfSrc"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'priview-pdf',
components: {
pdf
},
props: {
// 外部传递pdfUrl 即可
pdfUrl: {
type: String,
default: ''
}
},
computed: {
pdfSrc () {
return this.pdfUrl
}
}
}
</script>
- 页面
<priview-pdf pdfUrl="文件地址"></priview-pdf>
-
思路
- 安装 vue-pdf 插件
- 按需引入
import pdf from 'vue-pdf'
- 当一个组件使用
components: { pdf }
-
可能遇到的问题
- 预览时 不能显示中文,特别是发票之类的pdf.
- 解决方案:
- 引入
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
- 传入的pdfUrl 改为
pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory })
- 引入
-
解决中文无法显示的版本
<template>
<div class="priview-pdf-img">
<!-- 自己设置图片路径-->
<img src="@/assets/pdfInit.png" @click="dialogPriviewPdf = true" alt="" />
<el-dialog title="预览" :visible.sync="dialogPriviewPdf" top="5vh" append-to-body>
<pdf :src="pdfSrc" ref="pdf"></pdf>
</el-dialog>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
name: 'priview-pdf',
components: {
pdf
},
props: {
// 外部传递pdfUrl 即可
pdfUrl: {
type: String,
default: ''
}
},
data () {
return {
dialogPriviewPdf: false
}
},
computed: {
pdfSrc () {
return pdf.createLoadingTask({ url: this.pdfUrl, CMapReaderFactory })
}
}
}
</script>
<style lang="less" scoped>
.priview-pdf-img {
img {
width: 100px;
height: 100px;
}
}
& /deep/ .el-dialog {
width: 80%;
overflow-y: auto;
}
</style>
··· 生产中出现了一种诡异的情况, 打开第一个pdf后 ,不能打开其他的pdf了
··· 解决方法
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
pdfSrc (val) {
const that = this
return pdf.createLoadingTask({ url: val, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/',
cMapPacked: true })
},
更多推荐
已为社区贡献3条内容
所有评论(0)