vue结合vue-pdf实现pdf预览功能

vue结合vue-pdf实现pdf预览功能

准备

工具

"vue": "^2.6.14",
"vue-pdf": "^4.3.0",

安装

npm install --save vue-pdf

实现

创建PreviewPdf组件

使用

模板

import PreviewPdf from "@/component/common/PreviewPdf";
components: {PreviewPdf},

data

isPreview: false,
pdfUrl: '',
previewVisible: false

事件

methods: {
    preview(item) {
	  // pdfUrl就是可以通过浏览器地址栏访问的url
      this.pdfUrl = 'https://xxx.xxx.xxx.cn/' + process.env.VUE_APP_BUCKET_NAME + '/' + item.filePath
	  // 控制PreviewPdf组件的显示
      this.isPreview = true
	  // 控制PreviewPdf组件的对话框的显示
      this.previewVisible = true
    },
}