Vue之展示PDF格式的文档

2019-04-27 16:41:12 阅读：204 来源： 互联网

标签：canvas Vue let url ctx 文档 PDF viewport

　　事实上有很多种在前端展示PDF格式文档的方法，小编也用过好多种，例如有<iframe>、<embed>和<object>这些标签，但是在Vue项目里，这些方法都不能很好的展示PDF文档，实际上Vue给大家准备了展示PDF的插件，所以小编今天给大家讲解一下这个插件的用法。

　　首先下载插件

　　　　命令：npm install pdfjs-dist

　　下载完毕以后新建一个组件用来存放PDF文档

　　引入所需要的插件：

　　接下来就是Vue给大家已经准备好了展示PDF文档所需要的代码，不需要大家在手动书写了：

　　这里需要告诉大家，url最好还是传到七牛云上比较好（因为跨域这个东西很烦人）。

　　下面给大家带来完整的代码：（这里要注意，存放PDF的容器最好用canvas）

<template>
  <div>
    <p>合同预览</p>
    <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
import pdfjsLib from "pdfjs-dist";
// const Base64 = require('js-base64').Base64

export default {
  name: "ContractPreview",
  data() {
    return {
      title: "查看协议",
      pdfDoc: null,
      pages: 0
    };
  },
  methods: {
    // 初始化pdfjs
    initThePDFJSLIB: function() {
      pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";
    },
    _renderPage(num) {
      this.pdfDoc.getPage(num).then(page => {
        let canvas = document.getElementById("the-canvas" + num);
        let ctx = canvas.getContext("2d");
        let dpr = window.devicePixelRatio || 1;
        let bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        let ratio = dpr / bsr;
        let viewport = page.getViewport(
          screen.availWidth / page.getViewport(1).width
        );
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        page.render(renderContext);
        if (this.pages > num) {
          this._renderPage(num + 1);
        }
      });
    },
    _loadFile(url) {
      PDFJS.getDocument(url).then(pdf => {
        this.pdfDoc = pdf;
        this.pages = this.pdfDoc.numPages;
        this.$nextTick(() => {
          this._renderPage(1);
        });
      });
    }
  },
  mounted() {
    this.initThePDFJSLIB();
    document.title = this.title;
    let url = 'PDF链接地址’;
    console.log(url);
    this._loadFile(url);
  }
};
</script>

<style scoped>
canvas {
  display: block;
  border-bottom: 1px solid black;
}
</style>

标签：canvas,Vue,let,url,ctx,文档,PDF,viewport
来源： https://www.cnblogs.com/kanglinen/p/10779185.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue之展示PDF格式的文档