vue中将base64的pdf文件流转换成pdf并预览（一）——vue-pdf组件的基本使用
vue-pdf组件官网——/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格式的pdfimport {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>
