vue中将base64的pdf文件流转换成pdf并预览（一）—

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用

vue-pdf组件官网——https://www.npmjs.com/package/vue-pdf

1、安装

npm install vue-pdf

或

yarn add vue-pdf

2、基本使用-示例

index.vue

<template><pdf src="./path/to/static/relativity.pdf"></pdf>
</template><script>
import pdf from 'vue-pdf'export default {components: {pdf}
}

3、将base64 的pdf文件流转换成pdf并预览

1、安装依赖：

npm install vue-pdf --save-dev

2、代码

示例1

// data为后端给的base64格式的pdf
import { data } from "../../tempData";
import pdf from 'vue-pdf'
// 解决部分文字不显示的问题
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
// html<pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>data () {return {src: '',numPages: 0,page: 1,currentPage: 0};}，components: {pdf},mounted () {let da = data.fileToBase64let datas = 'data:application/pdf;base64,' + dathis.src = pdf.createLoadingTask({ url: datas, CMapReaderFactory });this.src.promise.then(pdf => {this.numPages = pdf.numPages;});},

示例2

<template><div class="main"><pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf></div>
</template><script>//引入vue-pdfimport pdf from 'vue-pdf'// 解决部分文字不显示的问题import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'export default {data () {return {src: '',numPages: 0,page: 1,currentPage: 0};},components: {pdf},created() {this.getZdysx();//获取配置文件yml属性},methods: {// 获取配置文件yml属性值getZdysx() {this.$https({url: this.$https.adornUrl('app/getZdzzzsjl'),method: 'get',// params: this.$https.adornParams({//   pripid: sessionStorage.getItem("pripid"),// })}).then(({data}) => {//pdf字节流busLicContent this.busLicContent ='data:application/pdf;base64,' + JSON.parse(data.getZdzzz).data.jsonMap.businessLicenceInfo.busLicContent;this.src = pdf.createLoadingTask({ url: this.busLicContent, CMapReaderFactory });this.src.promise.then(pdf => {this.numPages = pdf.numPages;});})},}}
</script><style lang="less" scoped>.main {width: 99.6%;height: 99%;}
</style>

3、效果

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用相关推荐

vue中将base64的pdf文件流转换成pdf并预览（二）——base64转PDF工具的使用
vue中将base64的pdf文件流转换成pdf并预览(二)--base64转PDF工具的使用 Base64 to PDF官网 1.官网官网--https://www.ipvoid.com/base ...
vue3中将base64的pdf文件流转换成pdf并预览（三）——base64数据转pdf pdf工具栏不显示 vue3-seamless-scroll组件的使用-事件捕获给接口追加数据
vue3中将base64的pdf文件流转换成pdf并预览(三)--接口base64数据转pdf的处理 & pdf工具栏不显示 & vue3-seamless-scroll组件的使用-事 ...
扫描的PDF文件怎么转换成word
扫描的PDF文件怎么转换成Word文档?为什么要将PDF文件转换成Word文件呢?很多人在网上下载资料的时候发现下载的文件多数是PDF格式的,这种文件并不能很好的为我们所用,不能复制不能修改,将其转 ...
PDF文件怎么转换成JPG图片？分享两种简单的转换方法
PDF文件怎么转换成JPG格式的图片呢?大家在使用PDF文件的过程中,肯定会遇到过一些内容非常多的文件,而我们需要使用到的地方可能只有几页的内容,大家不管是在使用过程中还是在传输文件的过程中,都会因为 ...
Java使用aspose把PDF文件转换成PNG文件,以及把PDF文件水印转换成PNG格式
Java代码把PDF文件转换成PNG文件需要引用aspose包,引入操作我写了一个博客,地址如下 https://blog.csdn.net/weixin_46713508/article/deta ...
html文件转换html格式,pdf文件怎么转换成html格式
PDF文件怎么转换成html格式呢?html格式其实就是网页格式,PDF文件和网页文件一般情况下是两种完全不搭边的格式,但是不可否定的是办公室的多样化总有人会有这样的需求,只要有需求就会有其相应的解决 ...
pdf文件怎么转换成图片？
pdf文件怎么转换成图片?今天我要给大家分享一个日常经常用到的办公小技巧,就是pdf文件怎么转换成图片,上个星期我刚好有这么一个需求,老板要求我把一份有着几十页的pdf文件转换成图片给他,所以我也真的 ...
支持导出PDF文件并转换成图片格式的PDF查看控件Spire.PDFViewer
Spire.PDFViewer for .NET是一款功能强大的PDF查看控件.它是由e-iceblue公司在2012年新推出的一款产品.它允许开发者从本地文件夹(File),stream和byte ...
PDF文件如何转换成转图片？分享两种实现方法
PDF文件通常是用于在不同计算机.操作系统和应用程序之间共享文档的标准格式.但有时,您可能需要将PDF文件转换为图像文件以进行其他用途.PDF文件如何转换成转图片?本文将介绍两种将PDF文件转换为图像 ...

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用

1、安装

2、基本使用-示例

3、将base64 的pdf文件流转换成pdf并预览

示例1

示例2

3、效果

vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用相关推荐

最新文章

热门文章