vue 将base64 的pdf文件流转换成pdf并预览
1、安装依赖:npm install vue-pdf --save-dev2、代码<template><div class="main"><pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf></div></templa
·
1、安装依赖:
npm install vue-pdf --save-dev
2、代码
<template>
<div class="main">
<pdf v-for="i in numPages" :key="i" :src="src" :page="i" ref="myPdfComponent"></pdf>
</div>
</template>
<script>
//引入vue-pdf
import 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、结果
更多推荐
已为社区贡献6条内容
所有评论(0)