解決vue-pdf檢視pdf檔案及列印亂碼的問題
前言
vue中簡單使用vue-pdf預覽pdf檔案,解決列印預覽亂碼問題
vue-pdf 使用
安裝
npm install --save vue-pdf
引入
import pdf from "vue-pdf
自定義封裝pdf預覽元件
<template> <el-dialog :visible.sync="pdfDialog" :close-on-click-modal="false" :show-close="false" width="900px" top="52px" > <div class="pdf" v-show="fileType == 'pdf'"> <p class="arrow"> <!-- 上一頁 --> <span @click="changePdfPage(0)" class="currentPage" :class="{ grey: currentPage == 1 }" >上一頁 </span > <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span> <!-- 下一頁 --> <span @click="changePdfPage(1)" class="currentPage" :class="{ grey: currentPage == pageCount }" > 下一頁</span > <button @click="$refs.pdf.print()">下載</button> <span style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;" @click="close" ><i class="el-icon-close"></i ></span> </p> <!-- loadPdfHandler:載入事件 src:需要展示的PDF地址;currentPage:當前展示的PDF頁碼;pageCount=$event:PDF檔案總頁碼;currentPage=$event:一開始載入的頁面--> <pdf ref="pdf" :src="src" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler" ></pdf> </div> </el-dialog> </template> <script> import pdf from "vue-pdf"; export default { components: { pdf },props: ["src"],data() { return { filesProps: { label: "originName" },pdfDialog: false,currentPage: 0,// pdf檔案頁碼 pageCount: 0,// pdf檔案總頁數 fileType: "pdf" // 檔案型別 }; },methods: { // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁 changePdfPage(val) { if (val === 0 && this.currentPage > 1) { this.currentPage--; } if (val === 1 && this.currentPage < this.pageCount) { this.currentPage++; } },// pdf載入時 loadPdfHandler() { this.currentPage = 1; // 載入的時候先載入第一頁 },handleOpen() { this.pdfDialog = true; },//關閉彈框 close() { this.pdfDialog = false; } } }; </script> <style lang="stylus"> .currentPage { cursor: pointer; color: #8c8e92; } .currentPage:hover { color: #2761ff; } .arrow{ position: fixed; top: 0px; left :0px; z-index: 2; width: 100%; background-color: #191919; padding: 12px 0; margin: 0; text-align :center; } >>>.el-dialog__body { color: #606266; font-size: 14px; padding:0; } </style>
使用
<template> <el-container> <el-header> <el-card> <div> <el-button style="font-style:oblique;font-size: 18px;" @click="handlePreviewFile" >PDF 預覽</el-button > <el-button style="float: right;line-height: 40px;padding: 3px;" type="text" @click="handleSafetyExperience" ><i class="el-icon-caret-left">返回</i></el-button > </div> </el-card> </el-header> <el-main> <el-card class="card-style"> <pdf-preview ref="pdfSearch" :src="src"></pdf-preview> </el-card> </el-main> </el-container> </template> <script> import PdfPreview from "../widget/PdfPreview"; export default { name: "InfoExperience",components: { PdfPreview },data() { return { src: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf" }; },created() {},methods: { handlePreviewFile() { this.$refs.pdfSearch.handleOpen(); },handleSafetyExperience() { this.$router.push({ path: "/safetyApp/sharedExperience" }); } } }; </script> <style scoped></style>
預覽效果
點選下載列印預覽
預覽出現亂碼
pdf列印亂碼解決辦法
開啟vue-pdf外掛目錄node_modules/vue-pdf/src/pdfjsWrapper.js
解決辦法
詳見Github上提供解決辦法 Fix fonts issue in printing #130
亂碼解決,列印預覽正常
修改後pdfjsWrapper.js原始碼
以下為本人修改的pdfjsWrapper.js檔案,親測解決亂碼問題
import { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service'; export default function(PDFJS) { function isPDFDocumentLoadingTask(obj) { return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true; } function createLoadingTask(src,options) { var source; if ( typeof(src) === 'string' ) source = { url: src }; else if ( src instanceof Uint8Array ) source = { data: src }; else if ( typeof(src) === 'object' && src !== null ) source = Object.assign({},src); else throw new TypeError('invalid src type'); var loadingTask = PDFJS.getDocument(source); loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public if ( options && options.onPassword ) loadingTask.onPassword = options.onPassword; if ( options && options.onProgress ) loadingTask.onProgress = options.onProgress; return loadingTask; } function PDFJSWrapper(canvasElt,annotationLayerElt,emitEvent) { var pdfDoc = null; var pdfPage = null; var pdfRender = null; var canceling = false; canvasElt.getContext('2d').save(); function clearCanvas() { canvasElt.getContext('2d').clearRect(0,canvasElt.width,canvasElt.height); } function clearAnnotations() { while ( annotationLayerElt.firstChild ) annotationLayerElt.removeChild(annotationLayerElt.firstChild); } this.destroy = function() { if ( pdfDoc === null ) return; pdfDoc.destroy(); pdfDoc = null; } this.getResolutionScale = function() { return canvasElt.offsetWidth / canvasElt.width; } this.printPage = function(dpi,pageNumberOnly) { if ( pdfPage === null ) return; // 1in == 72pt // 1in == 96px var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi; var PRINT_UNITS = PRINT_RESOLUTION / 72.0; var CSS_UNITS = 96.0 / 72.0; // var iframeElt = document.createElement('iframe'); var printContainerElement = document.createElement('div'); printContainerElement.setAttribute('id','print-container') // function removeIframe() { // // iframeElt.parentNode.removeChild(iframeElt); function removePrintContainer() { printContainerElement.parentNode.removeChild(printContainerElement); } new Promise(function(resolve,reject) { // iframeElt.frameBorder = '0'; // iframeElt.scrolling = 'no'; // iframeElt.width = '0px;' // iframeElt.height = '0px;' // iframeElt.style.cssText = 'position: absolute; top: 0; left: 0'; // // iframeElt.onload = function() { // // resolve(this.contentWindow); // } // // window.document.body.appendChild(iframeElt); printContainerElement.frameBorder = '0'; printContainerElement.scrolling = 'no'; printContainerElement.width = '0px;' printContainerElement.height = '0px;' printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0'; window.document.body.appendChild(printContainerElement); resolve(window) }) .then(function(win) { win.document.title = ''; return pdfDoc.getPage(1) .then(function(page) { var viewport = page.getViewport(1); // win.document.head.appendChild(win.document.createElement('style')).textContent = printContainerElement.appendChild(win.document.createElement('style')).textContent = '@supports ((size:A4) and (size:1pt 1pt)) {' + '@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' + '}' + '#print-canvas { display: none }' + '@media print {' + 'body { margin: 0 }' + 'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' + '#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' + 'body > *:not(#print-container) { display: none; }' + '}'+ '@media screen {' + 'body { margin: 0 }' + // '}'+ // // '' '}' return win; }) }) .then(function(win) { var allPages = []; for ( var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber ) { if ( pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1 ) continue; allPages.push( pdfDoc.getPage(pageNumber) .then(function(page) { var viewport = page.getViewport(1); // var printCanvasElt = win.document.body.appendChild(win.document.createElement('canvas')); var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas')); printCanvasElt.setAttribute('id','print-canvas') printCanvasElt.width = (viewport.width * PRINT_UNITS); printCanvasElt.height = (viewport.height * PRINT_UNITS); return page.render({ canvasContext: printCanvasElt.getContext('2d'),transform: [ // Additional transform,applied just before viewport transform. PRINT_UNITS,PRINT_UNITS,0 ],viewport: viewport,intent: 'print' }).promise; }) ); } Promise.all(allPages) .then(function() { win.focus(); // Required for IE if (win.document.queryCommandSupported('print')) { win.document.execCommand('print',false,null); } else { win.print(); } // removeIframe(); removePrintContainer(); }) .catch(function(err) { // removeIframe(); removePrintContainer(); emitEvent('error',err); }) }) } this.renderPage = function(rotate) { if ( pdfRender !== null ) { if ( canceling ) return; canceling = true; pdfRender.cancel(); return; } if ( pdfPage === null ) return; if ( rotate === undefined ) rotate = pdfPage.rotate; var scale = canvasElt.offsetWidth / pdfPage.getViewport(1).width * (window.devicePixelRatio || 1); var viewport = pdfPage.getViewport(scale,rotate); emitEvent('page-size',viewport.width,viewport.height); canvasElt.width = viewport.width; canvasElt.height = viewport.height; pdfRender = pdfPage.render({ canvasContext: canvasElt.getContext('2d'),viewport: viewport }); annotationLayerElt.style.visibility = 'hidden'; clearAnnotations(); var viewer = { scrollPageIntoView: function(params) { emitEvent('link-clicked',params.pageNumber) },}; var linkService = new PDFLinkService(); linkService.setDocument(pdfDoc); linkService.setViewer(viewer); pdfPage.getAnnotations({ intent: 'display' }) .then(function(annotations) { PDFJS.AnnotationLayer.render({ viewport: viewport.clone({ dontFlip: true }),div: annotationLayerElt,annotations: annotations,page: pdfPage,linkService: linkService,renderInteractiveForms: false }); }); pdfRender .then(function() { annotationLayerElt.style.visibility = ''; canceling = false; pdfRender = null; }) .catch(function(err) { pdfRender = null; if ( err instanceof PDFJS.RenderingCancelledException ) { canceling = false; this.renderPage(rotate); return; } emitEvent('error',err); }.bind(this)) } this.forEachPage = function(pageCallback) { var numPages = pdfDoc.numPages; (function next(pageNum) { pdfDoc.getPage(pageNum) .then(pageCallback) .then(function() { if ( ++pageNum <= numPages ) next(pageNum); }) })(1); } this.loadPage = function(pageNumber,rotate) { pdfPage = null; if ( pdfDoc === null ) return; pdfDoc.getPage(pageNumber) .then(function(page) { pdfPage = page; this.renderPage(rotate); emitEvent('page-loaded',page.pageNumber); }.bind(this)) .catch(function(err) { clearCanvas(); clearAnnotations(); emitEvent('error',err); }); } this.loadDocument = function(src) { pdfDoc = null; pdfPage = null; emitEvent('num-pages',undefined); if ( !src ) { canvasElt.removeAttribute('width'); canvasElt.removeAttribute('height'); clearAnnotations(); return; } if ( isPDFDocumentLoadingTask(src) ) { if ( src.destroyed ) { emitEvent('error',new Error('loadingTask has been destroyed')); return } var loadingTask = src; } else { var loadingTask = createLoadingTask(src,{ onPassword: function(updatePassword,reason) { var reasonStr; switch (reason) { case PDFJS.PasswordResponses.NEED_PASSWORD: reasonStr = 'NEED_PASSWORD'; break; case PDFJS.PasswordResponses.INCORRECT_PASSWORD: reasonStr = 'INCORRECT_PASSWORD'; break; } emitEvent('password',updatePassword,reasonStr); },onProgress: function(status) { var ratio = status.loaded / status.total; emitEvent('progress',Math.min(ratio,1)); } }); } loadingTask .then(function(pdf) { pdfDoc = pdf; emitEvent('num-pages',pdf.numPages); emitEvent('loaded'); }) .catch(function(err) { clearCanvas(); clearAnnotations(); emitEvent('error',err); }) } annotationLayerElt.style.transformOrigin = '0 0'; } return { createLoadingTask: createLoadingTask,PDFJSWrapper: PDFJSWrapper,} }
補充知識:vueshowpdf外掛預覽中文pdf出現亂碼問題+pdf.js載入bcmap檔案404報錯
vue專案中使用到pdf線上預覽,使用了vueshowpdf,測試pdf是好好的,但是當上傳到伺服器出現預覽的pdf亂碼問題,很是糾結,網上找了好多資料沒有,於是找找pdf相關的pdf預覽亂碼(中文亂碼)問題解決方案。
之前也試過pdf.js外掛本地測試,當去掉cmaps資料夾之後PDF會亂碼,新增之後又好了。檢視.bcmap檔案原來時候字型有關係的,於是估計就是字型問題。
解決方法:
1、下載pdf.js外掛,複製cmaps資料夾放到vue專案中,我放在static資料夾下面
2、在對應使用到vueshowpdf外掛中新增程式碼
*** PDFJS.cMapUrl = '../../static/cmaps/'; PDFJS.cMapPacked = true; *** PDFJS.cMapUrl = '../../static/cmaps/';//這裡面是相對路徑
然後神奇的效果就是成功啦,不再亂碼了。
注意:
可能您的頁面在伺服器端還會出現亂碼,中文不識別,不要怕,我找到了問題所在,IIS的MIME問題(然後找到網上一篇文章,證實了我是的想法)
新增:2018-11-16
我們會發現
我的bcmp檔案已經放到了對應目錄了,配置也對了,怎麼還是404
其實這個是iis的MIME檔案設定
新增.bcmap檔案 配置值 .bcmap -> image/svg+xml
我遇到的問題是.net專案,所以或者在Web.config新增如下程式碼
<system.webServer> <staticContent> <mimeMap fileExtension=".bcmap" mimeType="image/svg+xml" /> </staticContent> </system.webServer>
現在重新執行下應該是可以了,如果還不行的話,暫時就不知道是什麼原因引起的了
作為一個前端,難為我了!
以上這篇解決vue-pdf檢視pdf檔案及列印亂碼的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。