{"id":553,"date":"2020-03-17T16:16:58","date_gmt":"2020-03-17T08:16:58","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=553"},"modified":"2021-03-06T16:09:10","modified_gmt":"2021-03-06T08:09:10","slug":"js-pdf-js","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=553","title":{"rendered":"[JS] pdf.js"},"content":{"rendered":"\n<p>\u6700\u8fd1\u6709\u500b\u9810\u89bd pdf \u7684\u9700\u6c42\uff0c\u53ef\u4ee5\u900f\u904e pdf.js \u9019\u500b\u5957\u4ef6\u4f86\u9054\u6210\uff1a<a href=\"https:\/\/mozilla.github.io\/pdf.js\/\">https:\/\/mozilla.github.io\/pdf.js\/<\/a><\/p>\n\n\n<p>\u7c21\u55ae\u6b65\u9a5f\u8aaa\u660e\uff1a<\/p>\n\n\n<ul class=\"wp-block-list\"><li>\u5f15\u5165\u5957\u4ef6\u3001Worker<\/li><li>\u5efa\u7acb <code>fileReader<\/code> \u8b80\u53d6\u4f7f\u7528\u8005\u9078\u53d6\u7684\u6a94\u6848<\/li><li>\u4f7f\u7528<code>.getDocument()<\/code> \u53d6\u5f97\u6587\u6a94<\/li><li>\u57f7\u884c <code>for<\/code> \u8ff4\u5708\uff0c\u900f\u904e <code>.getPage()<\/code> \u8b80\u53d6\u4e26\u4ee5 <code>.render()<\/code> \u65b9\u6cd5\u4ee5 canvas \u7e6a\u51fa<\/li><\/ul>\n\n\n<p>\u9700\u8981\u6ce8\u610f <code>.getPage<\/code> \u662f\u975e\u540c\u6b65\u65b9\u6cd5\uff0c\u56e0\u6b64\u76f4\u63a5\u57f7\u884c\u8b80\u53d6\u4e26\u76f4\u63a5\u7e6a\u88fd\u7684\u8a71\uff0c\u53ef\u80fd\u6703\u6709\u4e82\u78bc\u932f\u8aa4\u554f\u984c\u3002<\/p>\n\n\n<p>\u7bc0\u9304 vue \u4e2d\u7684 methods\uff1a<\/p>\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">importPdfJs() {\n    const plugin = document.createElement('script')\n    plugin.setAttribute('src', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.2.228\/pdf.min.js')\n    plugin.async = true\n    document.head.appendChild(plugin)\n},\npreviewPdf(file) {\n    const vm = this\n    \/\/ Loaded via &lt;script&gt; tag, create shortcut to access PDF.js exports.\n    const pdfjsLib = window['pdfjs-dist\/build\/pdf']\n    \/\/ The workerSrc property shall be specified.\n    pdfjsLib.GlobalWorkerOptions.workerSrc =\n        'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.2.228\/pdf.worker.js'\n    const fileReader = new FileReader()\n    fileReader.onload = function() {\n        const viewer = document.getElementById('preview-container')\n        const pdfData = new Uint8Array(this.result)\n        const scale = 1.5\n        let thePdf = null\n        \/\/ Using DocumentInitParameters object to load binary data.\n        pdfjsLib.getDocument({ data: pdfData }).promise.then(\n            function(pdf) {\n                console.log('PDF loaded')\n                thePdf = pdf\n                for (let pageNumber = 1; pageNumber &lt;= pdf.numPages; pageNumber++) {\n                    const canvas = document.createElement('canvas')\n                    canvas.className = 'pdf-page-canvas'\n                    viewer.appendChild(canvas)\n                    renderPage(pageNumber, canvas)\n                }\n            },\n            function(reason) {\n                \/\/ PDF loading error\n                console.error(reason)\n            }\n        )\n        function renderPage(pageNumber, canvas) {\n            thePdf.getPage(pageNumber).then(function(page) {\n                console.log('Page loaded')\n                const viewport = page.getViewport({ scale })\n                canvas.height = viewport.height\n                canvas.width = viewport.width\n                const renderContext = {\n                    canvasContext: canvas.getContext('2d'),\n                    viewport: viewport\n                }\n                const renderTask = page.render(renderContext)\n                renderTask.promise.then(function() {\n                    pageRenderedNum++\n                    if (pageRenderedNum === thePdf.numPages) {\n                        console.log('Page rendered finished')\n                        vm.showUploadLoading = false\n                        viewer.classList.add('border', 'border-dotted', 'border-grey')\n                    }\n                })\n            })\n        }\n    }\n    fileReader.readAsArrayBuffer(file)\n}<\/pre>\n\n\n<p>\u8cc7\u6599\u4f86\u6e90\uff1a<a href=\"https:\/\/stackoverflow.com\/questions\/16480469\/how-to-display-whole-pdf-not-only-one-page-with-pdf-js\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (\u5728\u65b0\u5206\u9801\u4e2d\u958b\u555f)\">How to display whole PDF (not only one page) with PDF.JS?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u6709\u500b\u9810\u89bd pdf \u7684\u9700\u6c42\uff0c\u53ef\u4ee5\u900f\u904e pdf.j&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[4],"tags":[22,35],"class_list":["post-553","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-pdf-js","tag-35"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=553"}],"version-history":[{"count":1,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":613,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/553\/revisions\/613"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}