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

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

这两天遇到了一个问题,如何能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.js 应用程序中使用 `vue-pdf` 插件可以方便地展示 PDF 文件流。以下是详细的实现步骤和代码示例。 ### 安装 vue-pdf 首先,需要通过 npm 或 yarn 安装 `vue-pdf-embed` 或 `vue-pdf` 相关插件。这里以 `vue-pdf-embed` 为例: ```bash npm install vue-pdf-embed pdfjs-dist ``` ### 使用 vue-pdf-embed 显示 PDF 文件流 在组件中引入 `vue-pdf-embed` 并绑定 PDF 文件流数据。以下是一个完整的示例代码: ```vue <template> <div> <pdf :src="pdfData" style="width: 100%; height: 600px;"></pdf> </div> </template> <script> import pdf from 'vue-pdf-embed'; export default { components: { pdf }, data() { return { // 假设 pdfData 是从接口获取的文件流 pdfData: null }; }, mounted() { this.fetchPdfFile(); }, methods: { async fetchPdfFile() { try { const response = await fetch('https://example.com/sample.pdf'); // 替换为你的PDF文件地址 const blob = await response.blob(); this.pdfData = URL.createObjectURL(blob); } catch (error) { console.error("加载PDF失败", error); } } } }; </script> ``` ### 支持 Base64 数据流 如果后端返回的是 Base64 编码的 PDF 数据流,可以直接将其转换为 Blob URL 来显示: ```javascript const base64String = "your_base64_string_here"; // 替换为实际的Base64字符串 const byteCharacters = atob(base64String); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); const blob = new Blob([byteArray], { type: 'application/pdf' }); this.pdfData = URL.createObjectURL(blob); ``` ### 自定义 PDF 预览样式 可以根据需求自定义 PDF 文档的预览样式,例如调整页面缩放、设置导航控件等: ```vue <template> <div> <pdf :src="pdfData" :page="currentPage" @progress="loadedRatio = $event" @error="onError" style="width: 100%; height: 600px;" ></pdf> <p>加载进度:{{ Math.round(loadedRatio * 100) }}%</p> </div> </template> <script> import pdf from 'vue-pdf-embed'; export default { components: { pdf }, data() { return { pdfData: null, currentPage: 1, loadedRatio: 0 }; }, mounted() { this.fetchPdfFile(); }, methods: { async fetchPdfFile() { try { const response = await fetch('https://example.com/sample.pdf'); const blob = await response.blob(); this.pdfData = URL.createObjectURL(blob); } catch (error) { console.error("加载PDF失败", error); } }, onError(error) { console.error("PDF渲染错误", error); } } }; </script> ``` 通过以上方式,可以在 Vue.js 应用中灵活地集成 `vue-pdf` 插件并展示 PDF 文件流[^1]。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值