{"id":559,"date":"2025-12-06T19:02:41","date_gmt":"2025-12-06T11:02:41","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=559"},"modified":"2025-12-06T19:02:41","modified_gmt":"2025-12-06T11:02:41","slug":"%e5%89%8d%e7%ab%af%e5%ae%9e%e7%8e%b0pdf%e6%96%87%e4%bb%b6%e9%a2%84%e8%a7%88%e7%9a%84%e6%93%8d%e4%bd%9c%e6%ad%a5%e9%aa%a4%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%af%e5%ae%9e%e7%8e%b0pdf%e6%96%87%e4%bb%b6%e9%a2%84%e8%a7%88%e7%9a%84%e6%93%8d%e4%bd%9c%e6%ad%a5%e9%aa%a4%e6%96%b9%e6%b3%95\/","title":{"rendered":"\u524d\u7aef\u5b9e\u73b0pdf\u6587\u4ef6\u9884\u89c8\u7684\u64cd\u4f5c\u6b65\u9aa4\u65b9\u6cd5"},"content":{"rendered":"\n

\u597d\u7684\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u524d\u7aef\u5b9e\u73b0 PDF \u6587\u4ef6\u9884\u89c8\u7684\u5b8c\u6574\u64cd\u4f5c\u6b65\u9aa4\u65b9\u6cd5\uff082025 \u6700\u65b0\u7248\uff09<\/strong>\uff0c\u5305\u542b\u6d4f\u89c8\u5668\u539f\u751f\u65b9\u6cd5\u3001PDF.js \u5b9e\u73b0\u3001\u6587\u4ef6\u4e0a\u4f20\u52a8\u6001\u9884\u89c8\uff0c\u4ee5\u53ca\u5206\u9875\u548c\u7f29\u653e\u529f\u80fd\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\ude80 \u524d\u7aef\u5b9e\u73b0 PDF \u6587\u4ef6\u9884\u89c8\u6b65\u9aa4<\/h1>\n\n\n\n

\u4e00\u3001\u4f7f\u7528\u6d4f\u89c8\u5668\u539f\u751f\u65b9\u6cd5\uff08\u5feb\u901f\u5b9e\u73b0\uff09<\/h2>\n\n\n\n

1\ufe0f\u20e3 <iframe><\/code> \u6807\u7b7e<\/h3>\n\n\n
\n&lt;iframe src="example.pdf" width="100%" height="600px">&lt;\/iframe>\n\n<\/pre><\/div>\n\n\n
2\ufe0f\u20e3 <embed><\/code> \u6807\u7b7e<\/h3>\n\n\n
\n&lt;embed src="example.pdf" type="application\/pdf" width="100%" height="600px" \/>\n\n<\/pre><\/div>\n\n\n
\u2705 \u4f18\u70b9\uff1a\u7b80\u5355\uff0c\u65e0\u9700\u7b2c\u4e09\u65b9\u5e93
\u26a0\ufe0f \u7f3a\u70b9\uff1a\u79fb\u52a8\u7aef\u517c\u5bb9\u6027\u5dee\uff0c\u529f\u80fd\u6709\u9650\uff08\u65e0\u6cd5\u5206\u9875\u3001\u7f29\u653e\u3001\u8df3\u9875\u63a7\u5236\uff09<\/p>\n\n\n\n
\n\n\n\n
\u4e8c\u3001\u4f7f\u7528 PDF.js \u6e32\u67d3 PDF\uff08\u63a8\u8350\uff09<\/h2>\n\n\n\n
PDF.js \u662f Mozilla \u5b98\u65b9\u5f00\u6e90\u5e93\uff0c\u53ef\u5728\u524d\u7aef\u6e32\u67d3 PDF\u3002<\/p>\n\n\n\n
1\ufe0f\u20e3 \u5b89\u88c5 PDF.js<\/h3>\n\n\n
\nnpm install pdfjs-dist\n\n<\/pre><\/div>\n\n\n
2\ufe0f\u20e3 \u57fa\u7840\u6e32\u67d3\u793a\u4f8b<\/h3>\n\n\n
\n&lt;canvas id="pdfCanvas">&lt;\/canvas>\n\n&lt;script type="module">\nimport * as pdfjsLib from "pdfjs-dist\/build\/pdf";\nimport pdfjsWorker from "pdfjs-dist\/build\/pdf.worker.entry";\n\npdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;\n\nconst url = 'example.pdf';\nconst canvas = document.getElementById('pdfCanvas');\nconst ctx = canvas.getContext('2d');\n\nasync function renderPDF(url, pageNumber = 1) {\n  const pdf = await pdfjsLib.getDocument(url).promise;\n  const page = await pdf.getPage(pageNumber);\n  const viewport = page.getViewport({ scale: 1.5 });\n  canvas.width = viewport.width;\n  canvas.height = viewport.height;\n\n  await page.render({ canvasContext: ctx, viewport }).promise;\n}\n\nrenderPDF(url);\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
\u4e09\u3001\u7528\u6237\u4e0a\u4f20 PDF \u52a8\u6001\u9884\u89c8<\/h2>\n\n\n
\n&lt;input type="file" id="fileInput" accept="application\/pdf" \/>\n&lt;canvas id="pdfCanvas">&lt;\/canvas>\n\n&lt;script type="module">\nimport * as pdfjsLib from "pdfjs-dist\/build\/pdf";\nimport pdfjsWorker from "pdfjs-dist\/build\/pdf.worker.entry";\n\npdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;\n\nconst input = document.getElementById("fileInput");\nconst canvas = document.getElementById("pdfCanvas");\nconst ctx = canvas.getContext("2d");\n\ninput.addEventListener("change", async (e) => {\n  const file = e.target.files[0];\n  if (!file) return;\n\n  const fileURL = URL.createObjectURL(file);\n  const pdf = await pdfjsLib.getDocument(fileURL).promise;\n  const page = await pdf.getPage(1);\n\n  const viewport = page.getViewport({ scale: 1.5 });\n  canvas.width = viewport.width;\n  canvas.height = viewport.height;\n\n  await page.render({ canvasContext: ctx, viewport }).promise;\n});\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\u2705 \u7279\u70b9\uff1a\u652f\u6301\u7528\u6237\u4e0a\u4f20\u6587\u4ef6\uff0c\u52a8\u6001\u9884\u89c8<\/p>\n\n\n\n
\n\n\n\n
\u56db\u3001\u589e\u5f3a\u529f\u80fd\uff08\u5206\u9875\u3001\u7f29\u653e\u3001\u65cb\u8f6c\uff09<\/h2>\n\n\n\n
    \n
  1. \u5206\u9875\u6d4f\u89c8<\/strong><\/li>\n<\/ol>\n\n\n
    \nlet currentPage = 1;\n\nasync function nextPage(pdf) {\n  if(currentPage &lt; pdf.numPages) currentPage++;\n  const page = await pdf.getPage(currentPage);\n  const viewport = page.getViewport({ scale: 1.5 });\n  canvas.width = viewport.width;\n  canvas.height = viewport.height;\n  await page.render({ canvasContext: ctx, viewport }).promise;\n}\n\n<\/pre><\/div>\n\n\n
      \n
    1. \u7f29\u653e<\/strong><\/li>\n<\/ol>\n\n\n
      \nconst viewport = page.getViewport({ scale: 2.0 }); \/\/ \u7f29\u653e\u500d\u6570\n\n<\/pre><\/div>\n\n\n
        \n
      1. \u65cb\u8f6c<\/strong><\/li>\n<\/ol>\n\n\n
        \nconst viewport = page.getViewport({ scale: 1.5, rotation: 90 });\n\n<\/pre><\/div>\n\n\n
          \n
        1. \u8fdc\u7a0b PDF + \u9274\u6743<\/strong><\/li>\n<\/ol>\n\n\n
          \nconst res = await fetch(url, { headers: { Authorization: "Bearer token" } });\nconst blob = await res.blob();\nconst pdf = await pdfjsLib.getDocument(URL.createObjectURL(blob)).promise;\n\n<\/pre><\/div>\n\n\n
          \n\n\n\n
          \u4e94\u3001\u4f7f\u7528\u7ec4\u4ef6\u5e93\u5c01\u88c5\uff08Vue \/ React \/ Angular\uff09<\/h2>\n\n\n\n
          \u6846\u67b6<\/th>\u63a8\u8350\u5e93<\/th>\u7279\u70b9<\/th><\/tr><\/thead>
          Vue3<\/td>vue-pdf<\/code><\/td>\u5c01\u88c5 PDF.js\uff0c\u652f\u6301\u5206\u9875\u3001\u7f29\u653e<\/td><\/tr>
          React<\/td>react-pdf<\/code><\/td>React \u7ec4\u4ef6\u5316\uff0c\u529f\u80fd\u5168\u9762<\/td><\/tr>
          Angular<\/td>ngx-extended-pdf-viewer<\/code><\/td>\u5f3a\u5927\u529f\u80fd\uff0c\u652f\u6301\u7f29\u653e\u3001\u641c\u7d22\u3001\u6ce8\u91ca<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
          Vue3 \u793a\u4f8b<\/strong><\/p>\n\n\n
          \n&lt;template>\n  &lt;pdf src="example.pdf">&lt;\/pdf>\n&lt;\/template>\n\n&lt;script setup>\nimport pdf from 'vue-pdf';\n&lt;\/script>\n\n<\/pre><\/div>\n\n\n
          \n\n\n\n
          \u516d\u3001\u64cd\u4f5c\u6b65\u9aa4\u603b\u7ed3<\/h2>\n\n\n\n
            \n
          1. \u5feb\u901f\u9884\u89c8<\/strong>\uff1a\u4f7f\u7528 <iframe><\/code> \u6216 <embed><\/code><\/li>\n\n\n\n
          2. \u9ad8\u81ea\u5b9a\u4e49<\/strong>\uff1a\u4f7f\u7528 PDF.js \u6e32\u67d3\u5230 <canvas><\/code><\/li>\n\n\n\n
          3. \u7528\u6237\u4e0a\u4f20\u6587\u4ef6<\/strong>\uff1a\u7528 Blob + PDF.js<\/li>\n\n\n\n
          4. \u589e\u5f3a\u4f53\u9a8c<\/strong>\uff1a\u5206\u9875\u3001\u7f29\u653e\u3001\u65cb\u8f6c\u3001\u641c\u7d22<\/li>\n\n\n\n
          5. \u6846\u67b6\u9879\u76ee<\/strong>\uff1a\u4f7f\u7528 vue-pdf<\/code> \/ react-pdf<\/code> \/ ngx-extended-pdf-viewer<\/code> \u5c01\u88c5<\/li>\n<\/ol>\n\n\n\n
            \n\n\n\n
            \u597d\uff0c\u6211\u5e2e\u4f60\u6574\u7406\u4e00\u4efd Vue3 + PDF.js \u5168\u529f\u80fd PDF \u9884\u89c8\u793a\u4f8b\u9879\u76ee<\/strong>\uff0c\u5305\u542b\u5206\u9875\u3001\u7f29\u653e\u3001\u7528\u6237\u4e0a\u4f20\u6587\u4ef6\u548c\u8fdc\u7a0b PDF \u6e32\u67d3\uff0c\u4e00\u952e\u53ef\u8fd0\u884c\u3002<\/p>\n\n\n\n
            \n\n\n\n
            \ud83d\udce6 Vue3 + PDF.js PDF \u9884\u89c8\u793a\u4f8b\u9879\u76ee<\/h1>\n\n\n\n
            1\ufe0f\u20e3 \u5b89\u88c5\u4f9d\u8d56<\/h3>\n\n\n
            \nnpm init vue@latest pdf-preview-demo\ncd pdf-preview-demo\nnpm install\nnpm install pdfjs-dist\n\n<\/pre><\/div>\n\n\n
            \n\n\n\n
            2\ufe0f\u20e3 \u9879\u76ee\u7ed3\u6784\uff08\u793a\u4f8b\uff09<\/h3>\n\n\n
            \nsrc\/\n \u251c\u2500 components\/\n \u2502   \u2514\u2500 PdfViewer.vue\n \u251c\u2500 App.vue\n \u2514\u2500 main.js\n\n<\/pre><\/div>\n\n\n
            \n\n\n\n
            3\ufe0f\u20e3 PdfViewer.vue<\/h3>\n\n\n
            \n&lt;template>\n  &lt;div>\n    &lt;input type="file" @change="onFileChange" accept="application\/pdf" \/>\n    &lt;div class="controls">\n      &lt;button @click="prevPage">\u4e0a\u4e00\u9875&lt;\/button>\n      &lt;span>\u7b2c {{ currentPage }} \u9875 \/ \u5171 {{ totalPages }} \u9875&lt;\/span>\n      &lt;button @click="nextPage">\u4e0b\u4e00\u9875&lt;\/button>\n      &lt;button @click="zoomIn">\u653e\u5927&lt;\/button>\n      &lt;button @click="zoomOut">\u7f29\u5c0f&lt;\/button>\n    &lt;\/div>\n    &lt;canvas ref="pdfCanvas">&lt;\/canvas>\n  &lt;\/div>\n&lt;\/template>\n\n&lt;script setup>\nimport { ref } from "vue";\nimport * as pdfjsLib from "pdfjs-dist\/build\/pdf";\nimport pdfjsWorker from "pdfjs-dist\/build\/pdf.worker.entry";\n\npdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;\n\nconst pdfCanvas = ref(null);\nconst currentPage = ref(1);\nconst totalPages = ref(0);\nlet pdfDoc = null;\nlet scale = 1.5;\n\nconst renderPage = async (pageNum) => {\n  const page = await pdfDoc.getPage(pageNum);\n  const viewport = page.getViewport({ scale });\n  const canvas = pdfCanvas.value;\n  const ctx = canvas.getContext("2d");\n  canvas.width = viewport.width;\n  canvas.height = viewport.height;\n  await page.render({ canvasContext: ctx, viewport }).promise;\n};\n\nconst loadPDF = async (url) => {\n  pdfDoc = await pdfjsLib.getDocument(url).promise;\n  totalPages.value = pdfDoc.numPages;\n  currentPage.value = 1;\n  renderPage(currentPage.value);\n};\n\nconst onFileChange = async (event) => {\n  const file = event.target.files[0];\n  if (!file) return;\n  const fileURL = URL.createObjectURL(file);\n  await loadPDF(fileURL);\n};\n\nconst nextPage = () => {\n  if (currentPage.value &lt; totalPages.value) {\n    currentPage.value++;\n    renderPage(currentPage.value);\n  }\n};\n\nconst prevPage = () => {\n  if (currentPage.value > 1) {\n    currentPage.value--;\n    renderPage(currentPage.value);\n  }\n};\n\nconst zoomIn = () => {\n  scale += 0.25;\n  renderPage(currentPage.value);\n};\n\nconst zoomOut = () => {\n  if (scale > 0.5) {\n    scale -= 0.25;\n    renderPage(currentPage.value);\n  }\n};\n\n\/\/ \u793a\u4f8b\u52a0\u8f7d\u8fdc\u7a0b PDF\n\/\/ loadPDF('https:\/\/example.com\/sample.pdf');\n&lt;\/script>\n\n&lt;style scoped>\n.controls {\n  margin: 10px 0;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\ncanvas {\n  border: 1px solid #ccc;\n}\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
            \n\n\n\n
            4\ufe0f\u20e3 App.vue<\/h3>\n\n\n
            \n&lt;template>\n  &lt;div id="app">\n    &lt;h1>Vue3 PDF \u9884\u89c8 Demo&lt;\/h1>\n    &lt;PdfViewer \/>\n  &lt;\/div>\n&lt;\/template>\n\n&lt;script setup>\nimport PdfViewer from '.\/components\/PdfViewer.vue'\n&lt;\/script>\n\n&lt;style>\n#app {\n  padding: 20px;\n}\n&lt;\/style>\n\n<\/pre><\/div>\n\n\n
            \n\n\n\n
            5\ufe0f\u20e3 main.js<\/h3>\n\n\n
            \nimport { createApp } from 'vue'\nimport App from '.\/App.vue'\n\ncreateApp(App).mount('#app')\n\n<\/pre><\/div>\n\n\n
            \n\n\n\n
            6\ufe0f\u20e3 \u529f\u80fd\u8bf4\u660e<\/h3>\n\n\n\n