vue-pdf 票据字体不显示的问题
2024-04-12 21:56:22
PDF 预览与下载
功能描述：
- 在项目中点击PDF文件然后跳转到一个对话框，展示PDF的内容，然后还有分页和下载的功能。
使用的框架和具体的插件：
vue@2.5.16,vue-pdf-signature
使用方法：
描述：
在父组件中调用封装好的组件
pdf(实现预览PDF的功能)，然后当点击PDF时给子组件一个后端返回的PDF的地址，就可以实现效果。问题：
因为vue-pdf出现的各种问题，这里使用vue-pdf-signature,替换vue-pdf。字体有时候会出现缺失的情况，所以需要找到下面路径(
node_modules/vue-pdf/build/pdf-dist/cmaps)下的文件夹复制然后放到static下面。然后再组件里面直接引用，这样在解析的时候就不会出现字体丢失了。代码如下：
PdfPriview页面的代码
<template><div class="pdfPreview"><el-dialog:close-on-click-modal="false":visible.sync="dialogVisible":fullscreen="true":before-close="handleClose"title="合同预览"><div class="agreement_picture"><div class="tools"><el-button @click="prePage" class="mr10"> 上一页</el-button><el-button @click="nextPage" class="mr10"> 下一页</el-button><span class="page">{{pageNum}}/{{pageTotalNum}} </span><el-button @click="handleClose" class="mr10 fl-r btn-cancel"> 取消</el-button><el-button @click="downPDF" class="mr10 dowmBtn"> 下载</el-button></div><pdf ref="pdf":src="src":page="pageNum"@page-loaded="pageLoaded($event)"@num-pages="pageTotalNum=$event"@error="pdfError($event)"@link-clicked="page = $event"></pdf></div></el-dialog></div></template><script>
import pdf from 'vue-pdf-signature';export default {name: 'PdfPreview',components: {pdf},props:{dialog: {type: Boolean,default: false},urlPdf:{type:String,default:''}},data() {return {dialogVisible:this.dialog,url:this.urlPdf,src: '', // 预览地址pageNum: 1, // 当前页码pageTotalNum: 1, // 总页数};},mounted () {// 有时PDF文件地址会出现跨域的情况,这里最好处理一下var url = this.urlthis.src = pdf.createLoadingTask({url,cMapUrl: '../../../../static/cmaps/',cMapPacked: true,});},methods: {// 上一页函数，prePage() {var page = this.pageNumpage = page > 1 ? page - 1 : this.pageTotalNumthis.pageNum = page},// 下一页函数nextPage() {var page = this.pageNumpage = page < this.pageTotalNum ? page + 1 : 1this.pageNum = page},// 页面加载回调函数，其中e为当前页数pageLoaded(e) {this.curPageNum = e},// 抛出错误的回调函数。pdfError(error) {console.error(error)},downPDF() { // 下载 pdfvar url = this.urlvar tempLink = document.createElement("a");tempLink.style.display = "none";tempLink.href = url;tempLink.setAttribute("download", 'XXX.pdf');if (typeof tempLink.download === "undefined") {tempLink.setAttribute("target", "_blank");}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);this.handleClose();},handleClose() {// this.$emit('update:dialogVisible', false);// this.$emit('updata:url','');this.$emit('update',false);}}
};</script><style scoped>
.wrap{position: fixed;top: 0;left: 0;width: 100%;bottom: 0;
}
</style>父组件的代码
<template><div><el-dialog :title="dialogTitle" :visible.sync="editDialog" width="770px":close-on-click-modal="false" :close-on-press-escape="false" @close="dialogClose"><div class="dialog-div"><el-form label-width="110px"><div class="inline-div"><el-form-item label="企业名称："><div class="handle-input">{{detailForm.companyName}}</div></el-form-item><el-form-item label="位置："><div class="handle-input">{{detailForm.location}}</div></el-form-item></div><div class="inline-div"><el-form-item label="联系人："><div class="handle-input">{{detailForm.contact}}</div></el-form-item><el-form-item label="联系方式："><div class="handle-input">{{detailForm.contactInformation}}</div></el-form-item></div><el-form-item label="备注："><div class="handle-row-input">{{detailForm.remark}}</div></el-form-item><el-form-item label="附件："><div style="display: flex;flex-direction: column;"><el-upload ref="uploadImg"action="":disabled="true"accept=".pdf,.jpg,.jpeg,.png,.PNG,.bmp,.JPG,.JPEG":on-preview="handlePreview":file-list="fileList"></el-upload></div></el-form-item></el-form></div>
<!-- <div class="btn-div">-->
<!-- <el-button type="primary" @click="cancleSubmit">关闭</el-button>-->
<!-- </div>--></el-dialog><pdf-preview :dialog='pdfBoo' :urlPdf='pdfUrl' v-if="pdfBoo" @update="closeUpdate"></pdf-preview></div>
</template>
<script>export default {data(){return {pdfBoo:false,pdfUrl:''
}
},
methods: {closeUpdate(val){this.pdfBoo = val;},handlePreview(file) {if (file.name.endsWith(".pdf")) {this.pdfBoo= true;this.pdfUrl = file.response.data;} else {this.dialogImageUrl = file.response.data;this.dialogVisible = true;}},
}
</script>
遇到的问题：
- 主要在父组件一加载就会报错，然后解决一直出问题，最后在父组件中给子组件加上判断
v-if当需要的时候给她true让在在渲染，问题解决。
效果演示：
vue-pdf 票据字体不显示的问题相关推荐
- pdf.js 字体无法显示
pdf.js 字体无法显示 前端框架:antdpro 2 使用的插件是react-pdf 不显示的原因:字体文件找不到 错误提示:Warning: The CMap "baseUrl&qu ...
- Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
- 【itext学习之路】--6.将html转成pdf(解决中文不显示)
来源:[itext学习之路]-------(第七篇)将html转成pdf(解决中文不显示)_tomatocc的博客-CSDN博客 在上一篇文章中,我们学习了使用对pdf进行盖章/签章/数字签名,到此为 ...
- Ireport 导出pdf 特殊字体设置
这里的方案是 将ireport中 使用的字体 导出jar包 添加到项目中实现的 此处记录操作中的一些 关键点 1.首先 在ireport中添加需要的字体 点击 Install Font 选择需要安装 ...
- vue pdf canvas 展示 pdfjs pdf.worker.js
尝试过用 ifame 引入pdf 但是获取不到滚动条 embed 引入也不获取不到 尝试用过 vue-pdf 但还是获取不到滚动条 尝试用 PDFObject. 生成embed 也是获取不到 附上参 ...
- 在linux系统下java实现pdf导出汉字无法显示_ubuntu/Linux PDF文件中文无法显示或中文为方块的解决方法...
ubuntu1004,pdf文件有的无法显示中文,解决办法如下: 1. 先安装字体 A.sudo apt-get install xpdf-chinese-simplified; B. sudo ap ...
- VUE引用外部字体tff及常见bug解决方案
1. 引用字体步骤 1.1 web.base.conf.js 文件需要有解析tff文件的规则,在module:{ rules:{}}中插入代码 {test: /\.(woff2?|eot|ttf|ot ...
- java itext html转PDF解决中文无法显示以及base64图片处理
文章目录 一.添加maven依赖 二.处理中文不显示问题 三.处理HTML文件中Base64格式图片不显示问题 四.封装工具类 一.添加maven依赖 <dependency><gr ...
- 从pdf和字体内部格式简单分析pdf复制提取文字乱码的原理
wxleasyland@139.com 2021.12 参考别人<PDF内嵌字体分析 - 提取的文字是乱码原因分析>. 一般PDF文件中都是有嵌入字体的,这样阅读器可以正常显示. &quo ...
最新文章
- Barts PE Builder——Windows系统维护完全图形化攻略
- LED是否可以将光能转换成电能？
- WCF服务的REST / SOAP端点
- 验证url 地址是否是图片
- Gradle7.0，依赖统一管理的全新方式，了解一下~
- WCF与现行分布式通讯技术性能对比
- 基于MATLAB的FFT傅立叶分析
- 电力系统继电保护原理及仿真_电力系统继电保护(529页)
- echarts在.Net中使用实例(一) 简单的Demo
- java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
- netbeans字体与颜色配置模板相关网站
- Sharding-Sphere，Sharding-JDBC_分库分表(水平分库_水平分表)_Sharding-Sphere，Sharding-JDBC分布式_分库分表工作笔记004
- Centos7下安装小米SQL优化工具SOAR
- .ashx文件与.ashx.cs
- Python：身份运算符is和==的区别
- 使用JDBC创建出版社和书籍管理系统
- 阿里云批量发送短信接口Api
- COS对象存储服务的使用
- Linux系统10个开源漏洞检测工具
- Python在气象与海洋中的实践技术应用