[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>