Vue中实现pdf文件预览功能

最新推荐文章于 2024-09-13 16:08:02 发布

给我来碗粥

最新推荐文章于 2024-09-13 16:08:02 发布

阅读量2.1w

点赞数 4

分类专栏： Vue学习笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/zyy2045/article/details/125432369

版权

本文介绍如何在Vue项目中实现PDF文件预览。通过使用vue-pdf组件，首先进行安装，然后在需要的页面引入组件。当点击预览按钮时，获取PDF文件的服务器路径并传递给previewFile方法，处理路径后赋值给<vue-pdf>组件的:src属性，以Dialog弹框形式展示PDF。注意，此功能要求PDF文件与项目服务器在同一域下。

摘要由CSDN通过智能技术生成

写在前面：

实现的功能就是点击预览按钮，弹出对话框在线预览pdf文件

实现此功能的前提是需要在Vue项目中安装组件vue-pdf，

在终端命令行输入运行如下语句：

npm install --save vue-json-excel vue-pdf

安装完组件后，首先在要使用的页面中引入pdf组件

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      pdfUrl: '',
      src: '',
    }
  }
}

因为我们是前后端分离的vue项目，pdf的在服务器的位置后台已经返给我了