利用vue-pdf插件来让pdf的base64数据显示在页面上

本文介绍了如何通过vue-pdf插件在前端页面上展示Base64编码的PDF文件,并解决了中文内容显示不全的问题。在处理Base64数据并使用`pdf.createLoadingTask()`方法后,发现PDF报告中的横线样式无法显示,其他内容正常。作者寻求帮助以找出导致横线样式缺失的原因。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这两天遇到了一个问题,如何能pdf数据的base64显示在前端页面上,比对了网上各种方法,我发现还是用vue-pdf插件更加的方便快捷的满足我的需求。下面我介绍一下对vue-pdf插件的使用。
1,vue-pdf的安装
在控制台输入下方命令进行安装

npm install--save vue-pdf 

2,在页面进行注册

import pdf from 'vue-pdf'
    export default {
        name: "ReportInfo",
      components:{
          pdf
      },
      data(){
          return{
            iir133: '',             //base64
            base64Imgs:'',          //base64的PDF图片
            pdfUrl:''
          }}

3,对base64数据进行从处理

this.base64Imgs = "data:application/pdf;base64,"+this.iir133;
this.pdfUrl=pdf.createLoadingTask({ url: this.base64Imgs,cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/', cMapPacked: true })

pdf.createLoadingTask()方法能够让pdf中的中文内容显示完全,不发生混乱。关于这个方法的写法,我发现上述写法能够解决多次访问仍不会出现pdf内容混乱的问题,网上还有利用引用组件的方式,来解决中文内容混乱,但在第二次及以后访问后,还会出现内容混乱的问题。
4,前端代码
在这里插入图片描述

存在的问题:我是要显示一个pdf报告,但是不知道为什么报告中的横线样式显示不出来。其他内容都正常显示,即使我用pdf.js插件进行显示也会出现这个问题。我想请问各位大佬这是什么原因?请各位指点一二!

### 如何在 `vue-pdf` 中实现电子签名的显示 #### 安装依赖库 为了实现在 PDF 文件中嵌入和显示电子签名的功能,需要先安装必要的 Vue 插件。对于创建电子签名垫部分,可以采用 `vue-signature-pad` 来捕获用户的签名输入;而对于渲染 PDF 文档,则推荐使用 `pdfjs-dist` 和 `vue-pdf` 组合来处理。 ```bash npm install vue-signature-pad pdfjs-dist vue-pdf --save ``` #### 构建电子签名组件 构建一个专门负责获取用户手写签名的小部件: ```javascript // SignaturePad.vue <template> <div class="signature-pad"> <vueSignature ref="signature" /> <button @click="clear">清除</button> <button @click="save">保存</button> </div> </template> <script> import { VueSignature } from 'vue-signature-pad'; export default { components: { VueSignature, }, methods: { clear() { this.$refs.signature.clear(); }, save() { const signatureDataUrl = this.$refs.signature.save(); // 将签名数据传递给父级组件或其他地方进行后续操作 console.log('Saved signature:', signatureDataUrl); } } }; </script> ``` #### 修改 PDF 查看器以支持签名加载 为了让已有的 PDF 支持显示之前收集到的电子签名图像,在打开特定页面时动态注入该图片作为水印或附加层覆盖于原始内容之上。 ```html <!-- PdfViewerWithSignatures.vue --> <template> <div id="pdf-container"> <!-- 加载PDF文件 --> <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf> <!-- 如果有对应的签名则在此处绘制 --> <img v-if="signatures[i]" :style="{position:'absolute', top:`${(i-1)*viewerHeight}px`, width:'100%'}" :src="signatures[i]" alt="Signature"/> </div> </div> </template> <script> import pdf from "vue-pdf"; import axios from 'axios'; export default { data(){ return{ pdfSrc: null, // 存储要预览的PDF路径 signatures:[], // 各页对应存储着Base64编码后的签名图象字符串数组 viewerHeight: window.innerHeight / 2, // 假设每一页高度占屏幕一半空间 numPages: undefined // 总共多少页数 }; }, mounted(){ // 初始化设置PDF源以及请求关联此文档的所有签名字典 let loadingTask = pdf.createLoadingTask('/path/to/document.pdf'); loadingTask.promise.then(pdf => (this.numPages = pdf.numPages)); this.pdfSrc = loadingTask; // 获取当前PDF所有页码上的签名记录 axios.get(`/api/signatures?documentId=example`).then(response=>{ Object.assign(this.signatures,response.data); }); }, components:{pdf} }; </script> ``` 通过上述方式可以在基于 `vue-pdf` 的应用里集成电子签名功能[^1]。当用户完成签名后,可以通过 API 接口上传 Base64 编码形式的数据至服务器端,并将其与具体某份 PDF 关联起来以便日后检索回显。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值