移动端vue项目pdfjs使用

2021-10-19 12:03:51 阅读：245 来源： 互联网

标签：canvas vue ctx let pdfjs 移动 pdfData viewport

此案例使用的是vue2的@vue/composition-api，大部分代码来自 https://juejin.cn/post/6909252620741787656

此案例根据用户的屏幕宽度自适应为宽度100%

vue和pdfjs版本

"vue": "^2.6.12",
"pdfjs-dist": "^2.7.570",

html

<div class='pdf-wrap'>
  <canvas
    v-for="page in pdfPages"
    :key="page"
    :id="'pdfCanvas' + page"
  ></canvas>
</div>

let PDFJS = require('pdfjs-dist')
PDFJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry.js')
export default{
  setup(){
    const pdfData = reactive({
      pdfPages: [], // 页数
      pdfWidth: "", // 宽度
      pdfSrc: "", // 地址
      pdfDoc: "", // 文档内容
      pdfScale: 1 // 放大倍数
    })
    onMounted(() => {
      let loadingTask = PDFJS.getDocument(pdfData.pdfSrc)
      loadingTask.promise.then(function(pdf) {
        pdfData.pdfDoc = pdf;
        pdfData.pdfPages = pdf.numPages;
        // this.$nextTick(() => {
        renderPage(1);
        // });
        function renderPage(num){
          pdfData.pdfDoc.getPage(num).then(page => {
            let canvas = document.getElementById("pdfCanvas" + 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({ scale: pdfData.pdfScale });
            console.log('viewport',viewport)
            canvas.width = viewport.width  * ratio;
            canvas.height = viewport.height * ratio;
            canvas.style.width =window.innerWidth + "px";
            pdfData.pdfWidth = viewport.width + "px";
            canvas.style.height = window.innerWidth * viewport.height / viewport.width  + "px";
            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
            // 将 PDF 页面渲染到 canvas 上下文中
            let renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };
            page.render(renderContext);
            if (pdfData.pdfPages > num) {
              renderPage(num + 1);
            }
          });
        }
      }, function(err) {
        console.error(reason)
      })
    })
  }
}

代码不一定要放在onMounted中，只要保证renderPage函数调用时dom已经渲染就可以了。

使用require方式引用，是因为import方式可能找不到模块

标签：canvas,vue,ctx,let,pdfjs,移动,pdfData,viewport
来源： https://www.cnblogs.com/-liujia/p/15424169.html

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

ICode9

移动端vue项目pdfjs使用