純前端使用插件pdfjs實現(xiàn)將pdf轉為圖片的步驟

更新時間：2025年01月18日 09:08:07 作者：鍵.

這篇文章主要介紹了純前端使用插件pdfjs實現(xiàn)將pdf轉為圖片的步驟,在實現(xiàn)過程中遇到了跨域問題,后臺設置跨域但前端配置無效,最終采用后臺返回PDF的base64格式,通過PDF.js將base64轉換為二進制數(shù)據(jù)加載PDF,需要的朋友可以參考下

需求來源

預覽簡歷功能在移動端，由于用了一層iframe把這個功能嵌套在了app端，再用一個iframe來預覽，只有ios能看到，安卓就不支持，查了很多資料和插件，原理基本上都是用iframe實現(xiàn)的。最終轉換思路，將pdf下載轉為圖片然后繪制到canvans中也是一樣的效果。

實現(xiàn)步驟

先安裝pdfjs插件，插件開源免費

官網(wǎng)：

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');
    // 循環(huán)遍歷每一頁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>

最終效果：

問題

跨域

我直接放入設置了跨域的鏈接到url是可以直接得到pdf的，但是目前這個跨域問題，后臺說是有設置跨域，但是我請求有跨域，我在前端配置了跨域也還是不行。多番嘗試后這個問題還是沒有解決。由于時間緊迫，所以采用備用方案：后臺在接口返回了pdf的base64格式，pdfjs官方案例中說需要將base64轉為二進制數(shù)據(jù)就可以加載。
https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld64.html