uniapp-h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）
一.uniapp-h5文件流下载
场景：之所以会有文件流需求，前端给到一些水印内容，然后后台会给文件加上我们给到的水印并以文件流形式返回；这里以pdf格式为准。
这里单独调用uniapp的请求，调用封装的会出现打开下载后的文件空白情况；里面的注释我给写清楚一点
<template>
<view class="main_row1_cell fb" v-for="(item,_index) in downList">
<view class="downLoad" @click="download(item)">
<text>下载</text>
</view>
</view>
</template>
<script>
import {
getHostUrl} from '@/utils/util.js'//服务器的ip
export default {
onShow() {
},
onLoad() {
},
data() {
return {
downList: [{
name:"文件",id:1}],//列表数据
'
}
},
methods: {
//文件流下载
download(item) {
let materialItem = item
let _token = this.$store.state.token;
// 水印
let _strWaterText = "水印水印";
let baseUrl = getHostUrl();//服务器的ip
//这里是请求路径和参数的拼接（完整请求url）
let url = baseUrl + '/course/courseAppDownload/material/' + materialItem.id + '.pdf?watermark=' + _strWaterText + '&&type=1'
uni.request({
url:url,
responseType: 'arraybuffer', //这里记得设置响应数据格式，不然预览的pdf是空白
header:{
'Authorization': _token,
},
success: (response) => {
if(!response){
uni.showToast({
title:"下载失败",
duration:2000
});
}
console.log(response.data)
let pdfData = response.data; //pdfData是后端返回的文件流 //创建blob数据流，并用a标签来下载
let blob = new Blob([ pdfData], {
type: 'application/pdf;charset=UTF-8'
})
var a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
var url = window.URL.createObjectURL(blob);
a.href = url;
a.download = `${
materialItem.materialName}.pdf`;
a.click();
a.remove();
window.URL.revokeObjectURL(url);
},
ail: err => {
console.log(err)
}
});
}
}
}
</script>
二.uniapp-h5指定路径url下载
这里就比较直接类了，直接上代码
<template>
<text class="row2_text main-color fs-base" v-for="item in fileUrl" @click="downLoad(item)">{
{
item.name}}</text>
</template>
<script>
export default {
onShow() {
},
onLoad() {
},
data() {
return {
fileUrl: [{
name:"文件名字",url:"http:xxxxxxx"}],//列表数据
}
},
methods: {
//下载附件
downLoad(item) {
let _url = item.url;
let _name=item.name
uni.downloadFile({
url: _url, //文件链接
success: (res) => {
if (res.statusCode === 200) {
var oA = document.createElement("a");
oA.download = _name; // 设置下载的文件名，默认是'下载'
oA.href = res.tempFilePath; //临时路径再保存到本地
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
},
fail: (err) => {
uni.showToast({
icon: 'none',
mask: true,
title: '失败请重新下载',
});
},
})
}
}
}
</script>