vue 实现pdf文件在线预览

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=http%3a%2f%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=http%3A%2F%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/

  • 5
    点赞
  • 64
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
你可以使用第三方库来实现Vue预览PDF文件。一个常用的库是`vue-pdf`,它提供了一个PDF查看器组件供你在Vue应用中使用。 首先,确保你已经安装了`vue-pdf`库。你可以通过运行以下命令来安装它: ``` npm install vue-pdf ``` 然后,在你的Vue组件中,导入并使用`vue-pdf`组件。你可以按照以下示例代码来实现PDF预览功能: ```vue <template> <div> <vue-pdf :src="pdfUrl" :page="currentPage" :options="pdfOptions"></vue-pdf> <button @click="goToPreviousPage">上一页</button> <button @click="goToNextPage">下一页</button> </div> </template> <script> import { pdf } from 'vue-pdf'; export default { components: { VuePdf: pdf }, data() { return { pdfUrl: 'path/to/your/pdf/file.pdf', currentPage: 1, pdfOptions: { width: '100%', height: '500px' } }; }, methods: { goToPreviousPage() { if (this.currentPage > 1) { this.currentPage--; } }, goToNextPage() { // Assuming you know the total number of pages in the PDF const totalPages = 10; if (this.currentPage < totalPages) { this.currentPage++; } } } }; </script> ``` 在上面的代码中,你需要将`pdfUrl`替换为你要预览PDF文件的路径。你还可以设置`pdfOptions`对象来自定义PDF查看器的宽度、高度等属性。 通过点击"上一页"和"下一页"按钮,你可以在PDF的不同页之间进行切换。在`goToNextPage`方法中,你需要根据PDF文件的总页数来控制切换逻辑。 这样,你就可以在Vue应用中实现一个简单的PDF预览功能了。记得根据你的实际需求和UI设计进行相应的调整。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值