vue-pdf打印出现方字块乱码问题
目录
问题:
第一种:
第二种方法:
好吧,改的真麻烦直接给改完后的代码:
最终效果:
总结:
问题:
今天分享vue-pdf预览显示没有问题,但是打印时出现乱码问题。话不多说先上乱码图。今天主要是分享给大家两种方法。亲测有效!!!!!!!!
第一:在你使用vue-pdf的组件中使用<iframe>标签,如果对iframe不熟悉也没有关系,你就知道iframe 元素会创建包含另外一个文档的内联框架就OK了。
第一种:
把iframe标签放入组件中,这里我是放在pdf标签下方的
<iframe id="printIframe" :src="src" frameborder="0" style="display:none"></iframe>
iframe里面的' :src '是其本身的属性,"src"这个src是一个字符串,也是我PDF文件 的地址,我这里是写了一个固定地址是放在我们component文件中的。直接在data里面的return中声明一个src变量并对它赋值就可以了
然后在你绑定的打印按钮的方法中直接使用
document.getElementById('printIframe').contentWindow.print();
替代原来的方法 //this.$refs.mypdf.print()就可以了
代码如下:
<template>
<el-dialog
title="合同内容"
:visible.sync="dialogVisible"
width="70%"
:before-close="handleClose">
<!--
pdf中的属性:
src:表示PDF文件路径
:page:显示的页码,默认显示第一页
-->
<el-button @click="num--" v-if="num>=1">上一页</el-button>
<el-button @click="num++" v-if="num<=pageCount">下一页</el-button>
<el-button @click="print">打印合同</el-button>
{{currentPage}}/{{pageCount}}
:src=src :page="num"
@num-pages="pageCount = $event"
@page-loaded="currentPage=$event"
style="display:inline-block;width:500px"
ref="mypdf"
></pdf>
<iframe id="printIframe" :src="src" frameborder="0" style="display:none"></iframe>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'VuePdf',
components: {pdf},
data () {
return {
dialogVisible: false,
currentPage:0,
pageCount:0,
num:1,
src:'./test.pdf',
}
},
methods:{
print(){
//打印合同的方法
//this.$refs.mypdf.print()
document.getElementById('printIframe').contentWindow.print();
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(()=> {
done();
})
.catch(()=> {});
}
}
}
</script>
<style>
</style>
第二种方法:
第二种方法是改变原码的方式,在node_modules下的vue-pdf下的src下的pdfjsWrapper.js中。
乱码问题是因为我们安装vue-pdf的版本问题,它的这个源码因为版本更新已经改变了,下面这个地址详细的介绍了源码的改变。红色区域的'-'号表明是已经删除了的,绿色区域的加号是新加的。
使用方法就是你把红色区域的注释掉,并加上绿色区域的!!!!
github网址:https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7
部分内容:
需要注意的是里面的行数会有一些区别,可以Ctrl+H搜索关键字定位
下卖以我的代码行数为例:
首先找到上图中显示的78行位置,我是在91行:注释掉它,并且在下方加入绿色的两行!~~~~~好了就是按照这样改就好啦。
好吧,改的真麻烦直接给改完后的代码:
import { PDFLinkService } from 'pdfjs-dist/es5/web/pdf_viewer';var pendingOperation = Promise.resolve();export default function(PDFJS) {function isPDFDocumentLoadingTask(obj) {return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;// or: return obj.constructor.name === 'PDFDocumentLoadingTask';}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);elsethrow new TypeError('invalid src type');// source.verbosity = PDFJS.VerbosityLevel.INFOS;// source.pdfBug = true;// source.stopAtErrors = true;if ( options && options.withCredentials )source.withCredentials = options.withCredentials;var loadingTask = PDFJS.getDocument(source);loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not publicif ( 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, 0, canvasElt.width, canvasElt.height);}function clearAnnotations() {while ( annotationLayerElt.firstChild )annotationLayerElt.removeChild(annotationLayerElt.firstChild);}this.destroy = function() {if ( pdfDoc === null )return;// Aborts all network requests and destroys worker.pendingOperation = pdfDoc.destroy();pdfDoc = null;}this.getResolutionScale = function() {return canvasElt.offsetWidth / canvasElt.width;}this.printPage = function(dpi, pageNumberOnly) {if ( pdfPage === null )return;// 1in == 72pt// 1in == 96pxvar PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;var PRINT_UNITS = PRINT_RESOLUTION / 72.0;var CSS_UNITS = 96.0 / 72.0;var printContainerElement = document.createElement('div');printContainerElement.setAttribute('id', 'print-container')function removePrintContainer() {printContainerElement.parentNode.removeChild(printContainerElement);}new Promise(function(resolve, reject) {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({ scale: 1 });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; }' +'}' +'@media print {' +'body { margin: 0 }' +'#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({ scale: 1 });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, 0, 0,PRINT_UNITS, 0, 0],viewport: viewport,intent: 'print'}).promise;}));}Promise.all(allPages).then(function() {win.focus(); // Required for IEif (win.document.queryCommandSupported('print')) {win.document.execCommand('print', false, null);} else {win.print();}removePrintContainer();}).catch(function(err) {removePrintContainer();emitEvent('error', err);})})}this.renderPage = function(rotate) {if ( pdfRender !== null ) {if ( canceling )return;canceling = true;pdfRender.cancel().catch(function(err) {emitEvent('error', err);});return;}if ( pdfPage === null )return;var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);var scale = canvasElt.offsetWidth / pdfPage.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);var viewport = pdfPage.getViewport({ scale: scale, rotation:pageRotate });emitEvent('page-size', viewport.width, viewport.height, scale);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);pendingOperation = pendingOperation.then(function() {var getAnnotationsOperation =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});});var pdfRenderOperation =pdfRender.promise.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))return Promise.all([getAnnotationsOperation, pdfRenderOperation]);}.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;pendingOperation = pendingOperation.then(function() {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;}// wait for pending operation endspendingOperation = pendingOperation.then(function() {var loadingTask;if ( isPDFDocumentLoadingTask(src) ) {if ( src.destroyed ) {emitEvent('error', new Error('loadingTask has been destroyed'));return}loadingTask = src;} else {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));}});}return loadingTask.promise;}).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,}
}
最终效果:
总结:
第一种看起来真的很简单快捷,但是第二种可以了解为什么会出现乱码问题,看看哪种方法适合你吧,如果有用欢迎点赞评论收藏一波哟
vue-pdf打印出现方字块乱码问题相关推荐
- vue-pdf+element实现全屏窗口pdf分页预览,pdf打印实现和解决打印乱码
一.源码 vue-pdf打印实现和乱码解决https://download.csdn.net/download/lucky_fang/85498529 二.全屏窗口打印预览效果 分页预览pdf 窗口采 ...
- Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
- vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
- Vue PDF文件预览vue-pdf
最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://git ...
- js禁用浏览器 pdf 打印、下载功能(pdf.js 禁用打印下载、功能)
前端实现 pdf 预览方法 (1)用iframe标签src="文件地址"就可以直接打开,还可以设置width,height等属性.具体参考iframe属性. <iframe ...
- vue中打印插件vue-print-nb(一)——基本示例
vue中打印插件vue-print-nb(一)--基本示例 npm地址:https://www.npmjs.com/package/vue-print-nb 下载print.js地址:https:// ...
- vue 批量打印功能 打印自定义表格table
vue 批量打印功能 打印自定义表格table 批量打印功能 需求图 1.用excle先画出来 2.然后变为代码 点击文件 - - 另存为 - - 浏览 - - 保存类型(网页) - - 保存 然后在 ...
- python无法打印unicode编码_【整理】Python中实际上已经得到了正确的Unicode或某种编码的字符,但是看起来或打印出来却是乱码...
[背景] Python中的字符编码,其实的确有点复杂. 再加上,不同的开发环境和工具中,显示的逻辑和效果又不太相同,尤其是,中文的,初级用户,最常遇到的: (1)在Python自带的IDE:IDLE中 ...
- html表格分页打印样式,vue部分打印(多页自动分页、打印样式自定义、多页打印表格页面顶部带表头)...
写在前面:注意打印表格时,若需要多页打印,则尽量使用原生table元素实现,这样在分页时每页顶部会带有表头,用户体验比较好 一.引用插件(在 main.js 中全局引入!!注意,需要修改源码,所以尽量 ...
最新文章
- C++ 重载运算符 operator
- 三星笔记本FN功能键操作大全
- Ubuntu18.04 网络配置
- executeQuery,executeUpdate,execute区别
- MIN()与MAX()函数 的注意事项
- 广州中山大道BRT不开“巨无霸”公交车
- Linux创建目录【命令】
- 阿里数据中台大火,国外却在建设数据湖,这两者什么关系?
- 利用ES4封装Windows10
- LabView学习笔记——简易入门AND初级实战项目(计算器)
- 服务器虚拟机迁移的6个步骤,vmware 虚拟机迁移
- ICEM CFD学习笔记(2)
- Azure微软云(部署一台虚拟机云服务器)
- Leaflet地图 - 绘制台风风圈 - 2
- 【⚠️windows删除文件夹抽风了⚠️】“错误0x80070091:目录不是空的”问题处理
- 自动控制原理(2) - 线性化和传递函数
- ZeroBrane Studio远程调试Cocos2d-x的Lua脚本
- 你逛过凌晨4点的校园吗? -- 前端人的漫漫长路
- [2017BUAA软工]第0次个人作业
- 网站被毙莫惊慌,置之死地而后生