安裝 · jspdf_preview

# jspdf_preview 介紹： pdf文件預覽器，不支持編輯，基于pdfjs-dist。 ### 一、安裝 ``` npm install jspdf_preview ``` ## 使用 > 使用情景不一樣給出了不一樣的用法： - [簡單預覽（vue方式）](#user-content-簡單預覽)：只是渲染出來，不做任何操作。那么就可以考慮下canvas方式渲染。 - [自定義ui（全部）](#user-content-自定義ui)：如果自定義ui界面的，只要提供方法就好，那么可以考慮直接引入 - [移動端ui（vue）](#user-content-移動端ui)：如果是移動端且使用好的的ui界面 ### 簡單預覽 > 可以根據源碼來進行制作 **使用** ```html <template> <div class="home"> <pdf-browserify :urlOrFile="urlOrFile"></pdf-browserify> </div> </template> <script> import pdfBrowserify from 'jspdf_preview/src/browserify'; export default { name: 'Home', components: { pdfBrowserify }, created() { }, data() { return { urlOrFile: '/compressed.tracemonkey-pldi-09.pdf' } } } </script> ``` ### 自定義ui > 通過方法或者屬性進行。[其他的方法或屬性點擊我](#pdf 使用說明) #### 二、引入 ```js import 'jspdf_preview/legacy/web/pdf_viewer.css'; import PdfPreview from 'jspdf_preview' ``` #### 三、實例化 ```html <div id="viewerContainer" style="width: 100%;height: 600px"></div> ``` ```js var urlOrFile = `data:application/pdf;base64,JVBERi0xLjMNCiXi48/TDQoNCjEgMCBvYmoNCjw8DQovVHlwZSAvQ2F0YWxvZw0KL091dGxpbmVzIDIgMCBSDQovUGFnZXMgMyAwIFINCj4+DQplbmRvYmoNCg0KMiAwIG9iag0KPDwNCi9UeXBlIC9PdXRsaW5lcw0KL0NvdW50IDANCj4+DQplbmRvYmoNCg0KMyAwIG9iag0KPDwNCi9UeXBlIC9QYWdlcw0KL0NvdW50IDINCi9LaWRzIFsgNCAwIFIgNiAwIFIgXSANCj4+DQplbmRvYmoNCg0KNCAwIG9iag0KPDwNCi9UeXBlIC9QYWdlDQovUGFyZW50IDMgMCBSDQovUmVzb3VyY2VzIDw8DQovRm9udCA8PA0KL0YxIDkgMCBSIA0KPj4NCi9Qcm9jU2V0IDggMCBSDQo+Pg0KL01lZGlhQm94IFswIDAgNjEyLjAwMDAgNzkyLjAwMDBdDQovQ29udGVudHMgNSAwIFINCj4+DQplbmRvYmoNCg0KNSAwIG9iag0KPDwgL0xlbmd0aCAxMDc0ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBBIFNpbXBsZSBQREYgRmlsZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIFRoaXMgaXMgYSBzbWFsbCBkZW1vbnN0cmF0aW9uIC5wZGYgZmlsZSAtICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjY0LjcwNDAgVGQNCigganVzdCBmb3IgdXNlIGluIHRoZSBWaXJ0dWFsIE1lY2hhbmljcyB0dXRvcmlhbHMuIE1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NTIuNzUyMCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDYyOC44NDgwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjE2Ljg5NjAgVGQNCiggdGV4dC4gQW5kIG1vcmUgdGV4dC4gQm9yaW5nLCB6enp6ei4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNjA0Ljk0NDAgVGQNCiggbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDU5Mi45OTIwIFRkDQooIEFuZCBtb3JlIHRleHQuIEFuZCBtb3JlIHRleHQuICkgVGoNCkVUDQpCVA0KL0YxIDAwMTAgVGYNCjY5LjI1MDAgNTY5LjA4ODAgVGQNCiggQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA1NTcuMTM2MCBUZA0KKCB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBFdmVuIG1vcmUuIENvbnRpbnVlZCBvbiBwYWdlIDIgLi4uKSBUag0KRVQNCmVuZHN0cmVhbQ0KZW5kb2JqDQoNCjYgMCBvYmoNCjw8DQovVHlwZSAvUGFnZQ0KL1BhcmVudCAzIDAgUg0KL1Jlc291cmNlcyA8PA0KL0ZvbnQgPDwNCi9GMSA5IDAgUiANCj4+DQovUHJvY1NldCA4IDAgUg0KPj4NCi9NZWRpYUJveCBbMCAwIDYxMi4wMDAwIDc5Mi4wMDAwXQ0KL0NvbnRlbnRzIDcgMCBSDQo+Pg0KZW5kb2JqDQoNCjcgMCBvYmoNCjw8IC9MZW5ndGggNjc2ID4+DQpzdHJlYW0NCjIgSg0KQlQNCjAgMCAwIHJnDQovRjEgMDAyNyBUZg0KNTcuMzc1MCA3MjIuMjgwMCBUZA0KKCBTaW1wbGUgUERGIEZpbGUgMiApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY4OC42MDgwIFRkDQooIC4uLmNvbnRpbnVlZCBmcm9tIHBhZ2UgMS4gWWV0IG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NzYuNjU2MCBUZA0KKCBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSB0ZXh0LiBBbmQgbW9yZSApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY2NC43MDQwIFRkDQooIHRleHQuIE9oLCBob3cgYm9yaW5nIHR5cGluZyB0aGlzIHN0dWZmLiBCdXQgbm90IGFzIGJvcmluZyBhcyB3YXRjaGluZyApIFRqDQpFVA0KQlQNCi9GMSAwMDEwIFRmDQo2OS4yNTAwIDY1Mi43NTIwIFRkDQooIHBhaW50IGRyeS4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gQW5kIG1vcmUgdGV4dC4gKSBUag0KRVQNCkJUDQovRjEgMDAxMCBUZg0KNjkuMjUwMCA2NDAuODAwMCBUZA0KKCBCb3JpbmcuICBNb3JlLCBhIGxpdHRsZSBtb3JlIHRleHQuIFRoZSBlbmQsIGFuZCBqdXN0IGFzIHdlbGwuICkgVGoNCkVUDQplbmRzdHJlYW0NCmVuZG9iag0KDQo4IDAgb2JqDQpbL1BERiAvVGV4dF0NCmVuZG9iag0KDQo5IDAgb2JqDQo8PA0KL1R5cGUgL0ZvbnQNCi9TdWJ0eXBlIC9UeXBlMQ0KL05hbWUgL0YxDQovQmFzZUZvbnQgL0hlbHZldGljYQ0KL0VuY29kaW5nIC9XaW5BbnNpRW5jb2RpbmcNCj4+DQplbmRvYmoNCg0KMTAgMCBvYmoNCjw8DQovQ3JlYXRvciAoUmF2ZSBcKGh0dHA6Ly93d3cubmV2cm9uYS5jb20vcmF2ZVwpKQ0KL1Byb2R1Y2VyIChOZXZyb25hIERlc2lnbnMpDQovQ3JlYXRpb25EYXRlIChEOjIwMDYwMzAxMDcyODI2KQ0KPj4NCmVuZG9iag0KDQp4cmVmDQowIDExDQowMDAwMDAwMDAwIDY1NTM1IGYNCjAwMDAwMDAwMTkgMDAwMDAgbg0KMDAwMDAwMDA5MyAwMDAwMCBuDQowMDAwMDAwMTQ3IDAwMDAwIG4NCjAwMDAwMDAyMjIgMDAwMDAgbg0KMDAwMDAwMDM5MCAwMDAwMCBuDQowMDAwMDAxNTIyIDAwMDAwIG4NCjAwMDAwMDE2OTAgMDAwMDAgbg0KMDAwMDAwMjQyMyAwMDAwMCBuDQowMDAwMDAyNDU2IDAwMDAwIG4NCjAwMDAwMDI1NzQgMDAwMDAgbg0KDQp0cmFpbGVyDQo8PA0KL1NpemUgMTENCi9Sb290IDEgMCBSDQovSW5mbyAxMCAwIFINCj4+DQoNCnN0YXJ0eHJlZg0KMjcxNA0KJSVFT0YNCg==` var pdf = new PdfPreview({ urlOrFile: urlOrFile, target: '#viewerContainer', }) // 生命周期創建完成(pdf創建完成) pdf.onload(() => { this.title = pdf.getTitle; pdf.on("pagesinit", () => { // 初始化才能獲取到總頁數 console.log(pdf.pagesCount) }) pdf.on("pagechanging", (evt) => { console.log(evt.pageNumber) // 當前滑動第幾頁 }, true) }) ``` ### 移動端ui > 目前還不完善，請使用上面的實例化對象。但是簡單的還是可以使用的 **使用** ```html <template> <div class="home"> <pdf-preview3 :urlOrFile="urlOrFile"></pdf-preview3> </div> </template> <script> import pdfPreview3 from 'jspdf_preview/src/mobile.vue'; export default { name: 'Home', components: { pdfPreview3 }, data() { return { urlOrFile: '/compressed.tracemonkey-pldi-09.pdf' } }, methods: { } } </script> <style scoped></style> ``` # pdf 使用說明 ### 實例化對象 > 語法： new PdfPreview(options) **options參數：** | 屬性 | 類型 | 說明 | | ---- | ---- | ---- | | urlOrFile | string 或者 fileObject | （必須傳） | | target | string 或者 HTMLElementDom | （必須傳） | | cMapUrl | string | （自選）加載需要的cmaps 文件，默認是從 https://cdn.jsdelivr.net/npm/pdfjs-dist@2.8.335/cmaps/ 加載的，你也可以自定義請求的地址 | | cMapPacked | Boolean | （自選）默認為 true | | renderer | string | （自選）默認為 canvas 。你可以選擇： 'canvas' 或者 'svg' | | textLayerMode | Number | (自選) 默認2。0為禁止復制文本內容。 | ### onload(function) 方法 > 通過實例化后，此方法能夠知道pdf對象加載完成。 ```js var pdf = new PdfPreview({ urlOrFile: 'https://xxx.xx/xxx.pdf', target: '#viewerContainer', // dom 對象 }) // 生命周期創建完成(pdf創建完成) pdf.onload(() => { console.log('創建完成') // 必須在此處寫pdf 操作邏輯了 }) ``` ### 監聽事件 > 語法： pdf.on('eventName', function , [Boolean]) ```js var pdf = new PdfPreview({ urlOrFile: 'https://xxx.xx/xxx.pdf', target: '#viewerContainer', // dom 對象 }) // 生命周期創建完成(pdf創建完成) pdf.onload(() => { pdf.on('pagesinit', () => { console.log('pdf初始化完成') }) }) /** * 下面是所支持的事件了 * eventBus._on("resize", webViewerResize); eventBus._on("hashchange", webViewerHashchange); eventBus._on("beforeprint", _boundEvents.beforePrint); eventBus._on("afterprint", _boundEvents.afterPrint); eventBus._on("pagerendered", webViewerPageRendered); eventBus._on("updateviewarea", webViewerUpdateViewarea); eventBus._on("pagechanging", webViewerPageChanging); eventBus._on("scalechanging", webViewerScaleChanging); eventBus._on("rotationchanging", webViewerRotationChanging); eventBus._on("sidebarviewchanged", webViewerSidebarViewChanged); eventBus._on("pagemode", webViewerPageMode); eventBus._on("namedaction", webViewerNamedAction); eventBus._on("presentationmodechanged", webViewerPresentationModeChanged); eventBus._on("presentationmode", webViewerPresentationMode); eventBus._on("print", webViewerPrint); eventBus._on("download", webViewerDownload); eventBus._on("save", webViewerSave); eventBus._on("firstpage", webViewerFirstPage); eventBus._on("lastpage", webViewerLastPage); eventBus._on("nextpage", webViewerNextPage); eventBus._on("previouspage", webViewerPreviousPage); eventBus._on("zoomin", webViewerZoomIn); eventBus._on("zoomout", webViewerZoomOut); eventBus._on("zoomreset", webViewerZoomReset); eventBus._on("pagenumberchanged", webViewerPageNumberChanged); eventBus._on("scalechanged", webViewerScaleChanged); eventBus._on("rotatecw", webViewerRotateCw); eventBus._on("rotateccw", webViewerRotateCcw); eventBus._on("optionalcontentconfig", webViewerOptionalContentConfig); eventBus._on("switchscrollmode", webViewerSwitchScrollMode); eventBus._on("scrollmodechanged", webViewerScrollModeChanged); eventBus._on("switchspreadmode", webViewerSwitchSpreadMode); eventBus._on("spreadmodechanged", webViewerSpreadModeChanged); eventBus._on("documentproperties", webViewerDocumentProperties); eventBus._on("find", webViewerFind); eventBus._on("findfromurlhash", webViewerFindFromUrlHash); eventBus._on("updatefindmatchescount", webViewerUpdateFindMatchesCount); eventBus._on("updatefindcontrolstate", webViewerUpdateFindControlState); */ ``` ### 進度方法 > 語法糖： onProgress(function) ```js var pdf = new PdfPreview({ urlOrFile: 'https://xxx.xx/xxx.pdf', target: '#viewerContainer', // dom 對象 }) // 生命周期創建完成(pdf創建完成) pdf.onload(() => { pdf.onProgress( (progress, progressData) => { console.log( progress + '%') console.log(progressData) }) }) ``` ### 獲取pdf名稱 > 語法糖： pdf.getTitle ```js pdf.onload(() => { console.log(pdf.getTitle) }) ``` ### 旋轉 > 可以旋轉 90 度正負或者 180 度正負 ```js pdf.onload(() => { document.querySelector('#xxx').onclick = function () { // 進行旋轉 90度 pdf.rotatePages(90) } }) ``` ### 放大和縮小 **縮小zoomIn** ```js pdf.onload(() => { document.querySelector('#xxx').onclick = function () { pdf.zoomIn() } }) ``` **放大zoomOut** ```js pdf.onload(() => { document.querySelector('#xxx').onclick = function () { pdf.zoomOut() } }) ``` ### 獲取設置顯示第幾頁 > 獲取當前顯示第幾頁 ```js pdf.onload(() => { document.querySelector('#xxx').onclick = function () { console.log(pdf.page) // 獲取當前pdf展示第幾頁 } document.querySelector('#xxx').onclick = function () { pdf.page = 2; // 設置pdf 顯示到第二頁 } }) ``` ## 待支持 - 查找文本內容 - 鍵盤支持 - 全屏預覽 - 國際化 - 打印 MIT License Copyright (c) 2021 LaoCheng-cjs Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

安裝