1. 下载pdfjs
2. pdfjs解压后放到static里
3. 实现
<template>
<view style="padding: 20px;">
地址:<input type="text" v-model="pdfUrl" style="margin: 20px 0;">
<view style="display: flex;justify-content: space-between;">
<button @click="handleDownloadFile">下载</button>
<button @click="getList">获取列表</button>
</view>
<view>
<view v-for="item in pdfList" @click="previewPDF(item.filePath)" style="background:#2C405A;color: white;margin-top:20px;">
【PDF】:{{item.filePath}}
</view>
</view>
<web-view v-if="allUrl" :src="allUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
allUrl: "",
viewerUrl: '/static/pdfjs/web/viewer.html',
pdfUrl: 'http://abcfile.vaiwan.com/profile/upload/2022/06/07/上会系统测试用_20220607200050A001/上会系统测试用/陈美娟同志考察材料.pdf',
pdfList:[]
}
},
methods: {
/* 点击下载 */
handleDownloadFile() {
const downloadTask = uni.downloadFile({
url: this.pdfUrl,
success: ({
statusCode,
tempFilePath
}) => {
if (statusCode === 200) {
uni.saveFile({
tempFilePath,
success: (res) => {
this.getList()
},
fail: (e) => console.log('下载失败', e)
})
}
}
});
downloadTask.onProgressUpdate((res) => {
console.log('下载进度' + res.progress);
console.log('已经下载的数据长度' + res.totalBytesWritten);
console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
});
},
/* 点击获取保存文件列表 */
handleGetSaveFileList() {
let that = this
uni.getSavedFileList({
success: function(res) {
that.pdfList = res.fileList
console.log(that.pdfList)
}
})
},
/* 预览PDF */
previewPDF(url) {
const path = plus.io.convertLocalFileSystemURL(url)
let fileUrl = encodeURIComponent(path) // encodeURIComponent 函数可把字符串作为 URI 组件进行编码。
this.allUrl = this.viewerUrl + '?file=' + fileUrl
}
}
}
</script>