vueshowpdf 移动端pdf文件预览
1、安装
npm install vueshowpdf -S
2、参数
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 是否显示pdf | - | - |
| pdfurl | pdf的文件地址 | String | - |
| scale | 默认放大倍数 | Number | 1.2 |
| minscale | 最小放大倍数 | Number | 0.8 |
| maxscale | 最大放大倍数 | Number | 2 |
3、事件
| 名称 | 说明 | 回调参数 |
|---|---|---|
| closepdf | pdf关闭事件 | - |
| pdferr | 文件地址解析错误事件 | - |
4、核心代码
<template><div class="case-info"><van-cell title="附件" value="预览" is-link @click="viewPdf" class="perview" /><vueshowpdf class="pdf" v-model="isShowPdf" :pdfurl="pdfurl":minscale='0.4' :scale='0.6' @closepdf="isShowPdf = false" @pdferr="pdfError"></vueshowpdf></div>
</template><script>
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++}}
}
</script><style lang="scss" scoped>.perview .van-cell__value {color: #468bff;text-decoration: underline;}
</style>