[TOC] ## 概述 ## 對瀏覽器的支持 1. 支持 ` <script type="module">` ``` Chrome 61+ (2017年9月起) Firefox 60+ (2018年5月起) Safari 11+ (2017年9月起) Edge 16+ (2017年10月起) Opera 48+ (2017年9月起) ``` 2. 支持 `.then()` ``` 1. 主流現代瀏覽器全面支持： Chrome 32+ (2014年1月起) Firefox 29+ (2014年4月起) Safari 8+ (2014年9月起) Edge 12+ (2015年7月起) Opera 19+ (2014年1月起) 2. 移動瀏覽器支持： iOS Safari 8+ (2014年9月起) Android Browser 4.4.4+ (2014年6月起) Chrome for Android 32+ (2014年1月起) ``` ## 快速入門 ### 定制開發手動編譯 1. 編譯最新的項目 ``` > git clone https://github.com/mozilla/pdf.js > cd pdf.js > pnpm install ``` 2. 修改,取消跨域限制,變重新編譯 ``` // vi pdf.js/src/app.js:2235 //注釋以下代碼 if (fileOrigin !== viewerOrigin) { throw new Error("file origin does not match viewer's"); } ``` 編譯 ``` > npx gulp generic // 如果要兼容老瀏覽器 npx gulp generic-legacy ``` 3. 測試是否取消跨域限制 ``` > cd pdf.js > npx gulp server ``` 訪問 ``` http://localhost:8888/build/generic-legacy/web/viewer.html?file=http://192.168.0.50:8000/demo.pdf ``` ### 引入 pc 和手機的到其他項目中 1. 編譯 ``` > npx gulp generic // 如果要兼容老瀏覽器 npx gulp generic-legacy > npx gulp components // 編譯 pdf_viewer.js ,pdf_viewer.css ``` 2. 引入到其他項目中,把 `/build` 中的 components, generic-legacy(或generic) 引入到項目中 如放到其他項目的靜態頁面中 `/public/statics/pdf.js` ``` build ├── components ├── default_preferences ├── dev-sandbox ├── generic ├── generic-legacy ├── tmp └── version.json ``` 3. 文件預覽 PC 端瀏覽器訪問, file 參數可攜帶文件地址,如果是外部地址,需要開啟跨域, ``` http://127.0.0.1:8000/Public/static/pdfjs/generic-legacy/web/viewer.html?file=http://192.168.0.50:8000/demo.pdf ``` 移動端文件預覽需要改造 ``` vi mobile-viewer/viewer.mjs:30 // 添加獲取 file 的內容 const DEFAULT_URL = (new URL(window.location.href)).searchParams.get('file'); ``` 為了讓移動端正確顯示標簽 ``` // 參數攜帶 filename http://127.0.0.1:8000/Public/static/pdfjs/generic-legacy/web/viewer.html?filename=xxx.pdf&file=http://192.168.0.50:8000/demo.pdf vi mobile-viewer/viewer.mjs:147 // 獲取filename this.setTitle((new URL(window.location.href)).searchParams.get('filename') || title); ``` ### 直接引入編譯好的 ``` npm install pdfjs-dist --save ``` ## 示例 ### 展示一個pdf 頁面 <details> <summary> Hello-word</summary> ``` <canvas id="the-canvas"></canvas> <script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script> <script type="module"> pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.mjs'; const url ="2.pdf" const scale = 1.5; var outputScale = window.devicePixelRatio || 1; //瀏覽器的縮放比 const pdf = await pdfjsLib.getDocument(url).promise const page= await pdf.getPage(1) // 獲取頁面視圖 const viewport = page.getViewport({ scale: scale }); console.log(viewport); const canvas = document.getElementById('the-canvas'); const context = canvas.getContext('2d'); canvas.width = Math.floor(viewport.width * outputScale); canvas.height = Math.floor(viewport.height * outputScale); canvas.style.width = Math.floor(viewport.width) + "px"; canvas.style.height = Math.floor(viewport.height) + "px"; var transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null; var renderContext = { canvasContext: context, transform: transform, viewport: viewport }; page.render(renderContext); </script> ``` </details>