vue 实现pdf文件在线预览

最新推荐文章于 2025-06-04 15:03:07 发布

小爱同学-Allen

最新推荐文章于 2025-06-04 15:03:07 发布

阅读量1.3w

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/qq_34595425/article/details/117707530

本文介绍了两种实现PDF文件在线预览的方法。一种是利用vue-pdf组件，通过安装并引入该组件，结合vue的v-for指令和计算属性来显示PDF的每一页。另一种方法是通过iframe标签，设置src属性为PDF链接，可以实现简单的预览。此外，还提到了通用文件如Office文档的在线预览，可以利用Office Web Viewer，通过指定URL即可在浏览器中预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PDF文件在线预览的功能相信大家都是有遇到过的，这边有两种实现方法，大家可以借鉴参考下

第一种，使用vue-pdf

安装 npm install --save vue-pdf

页面代码

 <template>
    <div>
     <pdf
      ref="pdf"
      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"http://image.cache.timepack.cn/nodejs.pdf",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
      this.getNumPages()
  },
  methods: {
    # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  }
</script>

第二种，通过iframe标签

<template>
  <div class="pdfPriview">
      <iframe
        :src="pdfUrl"
        type="application/x-google-chrome-pdf"
        width="100%"
        frameborder="0"
        scrolling="auto"
        height="100%" />
  </div>
</template>

<script>
export default {
    data() {
        return {
            pdfUrl:'',
            numPages:null
        }
    },
    created(){
        // '#toolbar=0'把控制台隐藏
        this.pdfUrl = this.$route.query.pdfUrl+'#toolbar=0'
    },
}
</script>

<style lang="scss">
    .pdfPriview{
        height: 100%;
        overflow: hidden;
    }
</style>

在这里插入图片描述
其他通用文件在线预览的话使用这个
url为链接
let href = “https://view.officeapps.live.com/op/view.aspx?src=” +url
window.open(href, ‘_blank’);

以下是微软官方的一些实例：

在Microsoft Build会议上，有很多关于PowerPoint平台的演示。如果要观看其中一个演示文稿的视频，还可以使用Office Web Viewer查看附带的PowerPoint演示文稿。http://view.officeapps.live.com/op/view.aspx?src=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fvideo.ch9.ms%2fbuild%2f2011%2fslides%2fTOOL-532T_Sutter.pptx
在一个受欢迎的银行网站上，官方找到了这个很棒的Wedding Budget Planner电子表格。为了预览电子表格而不是下载电子表格，官方创建了一个Office Web Viewer链接。http://view.officeapps.live.com/op/view.aspx?src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Flearn.bankofamerica.com%2Fcontent%2Fexcel%2FWedding_Budget_Planner_Spreadsheet.xlsx
官方在Bing上找到的学校通讯模板。使用Office Web Viewer，您不必担心学校中的每个人都可以查看Word文档-现在他们所需要的只是浏览器。http://view.officeapps.live.com/op/view.aspx?src=newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx

如果你想了解更多的话：可以前往官方文档了解https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/