继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

vue-pdf实现pdf文件在线预览

ComPDFKit
关注TA
已关注
手记 2
粉丝 0
获赞 1

在日常的工作中在线预览 PDF 文件的需求是很多的,下面介绍一下使用 vue-pdf 实现pdf文件在线预览

  1. 使用 npm 安装 vue-pdf

    npm install vue-pdf

  2. 使用 vue-pdf 显示 PDF 文件

<template>
  <div>
    <pdf :src="url"></pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'

export default {
  components:{
    pdf
  },
  data(){
    return {
      url: "http://example.com/example.pdf"
    }
  }
</script>
  1. 此时页面中就会显示我们提供的 PDF 文件了,但是此时只显示了 PDF 文件的第一页

  2. 按页显示 PDF 文件

    <template>
      <div>
        <button @click="prevPage">上一页</button>
        <button @click="nextPage">下一页</button>
        <div >{{ pageNumber }} / {{ totalNumber }}</div>
        <pdf
          :page="pageNum"
          :src="url"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum=$event" 
          ></pdf>
      </div>
    </template>
    
    <script>
    import pdf from 'vue-pdf'
    
    export default {
      components: {
        pdf,
      },
      data() {
        return {
          url: "http://example.com/example.pdf",
          pageNum: 1,
          totalNumber: 1,
          loadedRatio: 0
        }
      },
      mounted() {
        this.getNumPages()
      },
      methods: {
        getNumPages() {
          let loadingTask = pdf.createLoadingTask(this.url)
          loadingTask.promise.then(pdf => {
            this.totalNumber = pdf.numPages
          }).catch(err => {
            console.error('pdf 加载失败', err);
          })
        },
        // 上一页
        prePage() {
          let page = this.pageNumber
          page = page > 1 ? page - 1 : this.totalNumber
          this.pageNumber = page
        },
    
        // 下一页
        nextPage() {
          let page = this.pageNumber
          page = page < this.totalNumber ? page + 1 : 1
          this.pageNumber = page
        }
      }
    }
    </script>
    
    

使用 vue-pdf 能满足我们预览 PDF 文件的要求,但是使用起来太繁琐了,配置很多,无法开箱使用,下面介绍一款 PDF SDK 实现 PDF 在线预览

使用 ComPDFKit PDF SDK 实现 PDF 文件的在线预览

第一步:添加 ComPDFKit PDF SDK 包

  1. @compdfkit 文件夹添加到项目的 目录或 assets 目录下的 lib 目录中。这将作为 ComPDFKit PDF SDK for Web 的入文件,并将它导入到您的项目中。

  2. 将包含运行 ComPDFKit PDF SDK for Web 所需的静态资源文件的 webviewer 文件夹添加到项目的静态资源文件夹中。获取地址和试用地址:https://www.compdf.com/webviewer/demo

第二步:显示PDF文档

  1. @compdfkit 文件夹中的 webviewer.js 文件导入到您的项目中。

  2. 调用 ComPDFKitViewer.init() 在您的项目中初始化 ComPDFKit Web Viewer。

  3. 将要显示的 PDF 地址和许可证密钥传递给 init 函数

// Import the JS file of ComPDFKit Web Viewer
import ComPDFKitViewer from "/@compdfkit/webviewer";
const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: 'Input your license here'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Viewer loaded');
  })
})
  1. 项目运行后,您就可以看到要显示的 PDF 文件了。
打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP