当前位置：首页 > article >正文

纯前端实现将pdf转为图片（插件pdfjs）

article 2025/1/4 6:19:20

需求来源

预览简历功能在移动端，由于用了一层iframe把这个功能嵌套在了app端，再用一个iframe来预览，只有ios能看到，安卓就不支持，查了很多资料和插件，原理基本上都是用iframe实现的。最终转换思路，将pdf下载转为图片然后绘制到canvans中也是一样的效果。

实现步骤

先安装pdfjs插件，插件开源免费
官网：
https://github.com/mozilla/pdf.js

在vue或react项目中使用
https://github.com/mozilla/pdf.js/wiki/Setup-pdf.js-in-a-website

npm install pdfjs-dist --save

**安装完后一定要去看使用示例**
：
在这里插入图片描述
上面几步完成后就完成80%了，剩下的就是把图片绘制到canvans了

这里我直接贴源码了,注意一点，官方的示例中没有import 'pdfjs-dist/build/pdf.worker.mjs'; 这一段导入，会有一个报错
在这里插入图片描述
gihub上有解释
https://github.com/mozilla/pdf.js/issues/10478

<template>
  <div ref="showpdfRef"></div>
</template>

<script setup>
import { ref } from 'vue';
import { getDocument } from 'pdfjs-dist/legacy/build/pdf.mjs';
import 'pdfjs-dist/build/pdf.worker.mjs';

const showpdfRef = ref(null);

const pdfPath ='xxxxxxxx'

const loadingTask = getDocument(pdfPath);
loadingTask.promise
  .then(async (pdf) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    // 循环遍历每一页pdf，将其转成图片
    for (let i = 1; i <= pdf._pdfInfo.numPages; i++) {
      // 获取pdf页
      const page = await pdf.getPage(i);
      // 获取页的尺寸
      const viewport = page.getViewport({ scale: 1 });
      // 设置canvas的尺寸
      canvas.width = viewport.width;
      canvas.height = viewport.height;
      // 将pdf页渲染到canvas上
      await page.render({ canvasContext: context, viewport: viewport }).promise;
      // 将canvas转成图片，并添加到页面上
      const img = document.createElement('img');
      img.src = canvas.toDataURL('image/png');
      showpdfRef.value.appendChild(img);
    }
   
  })
  .then(
    function () {
      console.log('# End of Document');
    },
    function (err) {
      console.error('Error: ' + err);
    },
  );
</script>

<style scoped></style>