网站开发到发布,推介网app,界面设计风格,网站片区1、安装
npm install vueshowpdf -S2、参数
属性说明类型默认值v-model是否显示pdf--pdfurlpdf的文件地址String- scale 默认放大倍数 Number1.2 minscale 最小放大倍数 Number0.8 maxscale 最大放大倍数 Number2
3、事件
名称说明回调参数closepdf pdf关闭事件-pdferr文…
1、安装
npm install vueshowpdf -S2、参数
属性说明类型默认值v-model是否显示pdf--pdfurlpdf的文件地址String- scale 默认放大倍数 Number1.2 minscale 最小放大倍数 Number0.8 maxscale 最大放大倍数 Number2
3、事件
名称说明回调参数closepdf pdf关闭事件-pdferr文件地址解析错误事件-
4、核心代码
templatediv classcase-infovan-cell title附件 value预览 is-link clickviewPdf classperview /vueshowpdf classpdf v-modelisShowPdf :pdfurlpdfurl:minscale0.4 :scale0.6 closepdfisShowPdf false pdferrpdfError/vueshowpdf/div
/templatescript
import api from /api.js
import vueshowpdf from vueshowpdf
export default {name: test,data () {return {isShowPdf: false,pdfUrl: ,pdfKey: 0}},components: {vueshowpdf},deactivated () {// 离开页面默认关闭pdfthis.isShowPdf falsethis.pdfKey},methods: {// 预览pdfasync viewPdf () {if (this.pdfUrl) {this.isShowPdf true} else {this.$toast.loading({message: 加载中...,duration: 0,forbidClick: true})try {const res await api.getFilePreview()this.$toast.clear()if (res.code 0) {let blob this.dataURLtoBlob(res.data)this.pdfurl URL.createObjectURL(blob)this.isShowPdf true} else {this.$toast(res.msg || 该原始文件不存在)}} catch (error) {this.$toast.clear()}}},// 将base64转换为文件dataURLtoBlob (dataurl) {const bstr atob(dataurl)let n bstr.lengthconst u8arr new Uint8Array(n)while (n--) {u8arr[n] bstr.charCodeAt(n)}return new Blob([u8arr], { type: application/pdf })},// 关闭pdfclosePdf () {this.isShowPdf falsethis.pdfKey},// pdf预览失败pdfError (errorUrl) {this.$toast.fail(预览失败)this.isShowPdf falsethis.pdfKey}}
}
/scriptstyle langscss scoped.perview .van-cell__value {color: #468bff;text-decoration: underline;}
/style
