vue pdf文件在线预览

在Vue中实现PDF文件的在线预览可以使用vue-pdf组件。以下是一个示例代码：

首先，在要使用的页面中引入pdf组件：

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data () {
    return {
      pdfUrl: '',
      src: ''
    }
  }
}
</script>

然后，在点击事件中处理文件路径并打开预览弹框：

methods: {
  previewFile (file) {
    this.pdfUrl = file // 设置PDF文件的路径
    // 处理跨域情况
    this.src = pdf.createLoadingTask(this.pdfUrl)
    this.pdfPreviewDialog = true // 打开预览弹框
  }
}

以上代码中，`pdfUrl`是PDF文件的路径，`src`是用于加载PDF文件的任务对象。通过设置`pdfUrl`和`src`，然后打开预览弹框，即可实现PDF文件的在线预览。