uniapp预览、下载PDF(文件流)
uniapp预览、下载pdf文件
·
将下载的文件解压,把解压的文件放到项目的hybild文件夹下的html里
在pages文件夹下新建一个filePreview.vue页面来预览pdf文件,代码如下
<template>
<view>
<web-view :src="allUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
viewerUrl: '/hybrid/html/web/viewer.html',
allUrl: ''
}
},
onLoad(options) {
this.allUrl = this.viewerUrl + '?file=' + options.url
}
}
</script>
<style>
</style>
在你原来的页面先获取到要预览的pdf文件的文件流,然后创建预览路径,跳转到预览页面时将预览路径作为参数传递
uni.request({
url:'http://xxxxxxx',
responseType: 'arraybuffer', //这里记得设置响应数据格式,不然预览的pdf是空白
success: (response) => {
if(!response){
uni.showToast({
title:"协议预览失败",
duration:2000
});
}
let pdfData = response.data; //pdfData是后端返回的文件流
let blob = new Blob([ pdfData], {
type: 'application/pdf;charset=UTF-8'
})
pdfData = window.URL.createObjectURL(blob) //创建预览路径
this.agreementUrl = encodeURIComponent(pdfData)
},
fail: err => {
console.log(err)
}
});
uni.navigateTo({
url: '/pages/mob/agreement/filePreview?url=' + this.agreementUrl
})//这里的url指向你刚创建的filePreviwe.vue页面
这样就能成功预览
二、下载 PDF文件
uniapp自带uni.download方法下载不了pdf,并且下载后需要用uni.saveFile方法来保存文件,目前该方法H5端不适用所以用了以下方法
downloadAgreement: function() {
uni.showLoading({
title:"正在请求数据"
});
uni.request({
url:'http://xxxxxxxxx', //获取文件流的请求路径
responseType: "arraybuffer",
success: (response) => {
uni.hideLoading();
if(!response){
uni.showToast({
title:"下载失败",
duration:2000
});
}
let blob = new Blob([response.data]);
let downloadElement = document.createElement("a");
let href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = '电子协议.pdf'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
}
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)