背景：vue2.0需要把pdf轉成圖片，顯示在url里面，使用pdfjs-dist來解決

步驟：

1、安裝依賴包(我的項目是node12，安裝太高版本會報錯)

npm i pdfjs-dist@2.16.105

2、vue代碼

<template><div class="main ps-r"><img id="code" v-if="imgSrc" :src="imgSrc" alt="PDF preview" /></div>
</template><script>
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';export default {data() {return {imgSrc: '', // 圖片數據 URLpdfUrl: 'xxxxx', //你的pdf url}},created() {this.renderPdfToImage(this.pdfUrl);},methods:{  async renderPdfToImage(url) {try {const loadingTask = pdfjsLib.getDocument(url)const pdf = await loadingTask.promiseconst page = await pdf.getPage(1) // 獲取第 1 頁const viewport = page.getViewport({ scale: 2 }) // 縮放比例const canvas = document.createElement('canvas')const context = canvas.getContext('2d')canvas.width = viewport.widthcanvas.height = viewport.heightconst renderContext = {canvasContext: context,viewport: viewport,}await page.render(renderContext).promise// 導出為圖片this.imgSrc = canvas.toDataURL('image/png')} catch (error) {console.error('PDF 轉圖片失敗:', error)}}}
}
</script>