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

这两天遇到了一个问题，如何能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: '',             //base64base64Imgs:'',          //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的base64数据显示在页面上相关推荐

Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
idea 利用vue.js插件创建vue初始化项目
IDEA 构建出的 Vue 项目是不含 node_modules 的,所以要先调出终端,执行 npm install 运行完成后,输入 npm run dev 即可. vue初始化项目完成!!! 另外 ...
vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
php+预览和下载pdf文件,vue实现在线预览pdf文件和下载（pdf.js）
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件, ...
vue 在线访问word,excel,pdf 文件以及打印
git 项目代码一.pdf 1. vue-pdf 安装 npm i --save vue-pdf 语法在组件种使用import pdf from 'vue-pdf'pdf.createLoadin ...
vue pdf canvas 展示 pdfjs pdf.worker.js
尝试过用 ifame 引入pdf 但是获取不到滚动条 embed 引入也不获取不到尝试用过 vue-pdf 但还是获取不到滚动条尝试用 PDFObject. 生成embed 也是获取不到附上参 ...
前端vue项目-关于下载文件pdf/excel
最近在做一些需求,需要下载一些文件信息,最频繁的就是下载excel文件到本地了看过了很多方法,做个整理吧哈哈哈哈参考的文章链接: https://www.cnblogs.com/jiangweic ...
vue页面内容保存为PDF
1.安装插件html2canvas+jspdf npm i -s html2canvas jspdf 2.在src下新建util文件夹并新建htmlToPdf.js,添加如下代码 import htm ...
JS导出PDF插件（支持中文、图片使用路径）
JS导出PDF插件(支持中文.图片使用路径) 原文:JS导出PDF插件(支持中文.图片使用路径) 在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfma ...

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

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

最新文章

热门文章