uniapp-h5中的文件流下载和指定的url下载总结（解决下载后的pdf打开空白情况）

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);  
						},
						fail: 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>

以上测试需要在浏览器端测试哦，针对h5的。有什么问题欢迎评论区留言哦。。