序：
在实现文件的下载，采用 a 标签，会出现图片，没有进行下载，而是，在当前页面打开了图片。
导致原因： ·a标签，有 download 属性，可以实现下载 同源文件（ ip 和 端口 相同），当图片不同源 时，点击下载，会在当前窗口直接打开图片，而不是进入下载状态。
1. 后端返回文件 url （a标签）
1.1 没有图片的情况
<template>
<div>
<a-modal v-model:visible="props.visible" title="DownloadFile">
<div class="down-load-file" v-for = "(item, index) in fileList" :key="index">
<h4>{{item.fileType}}: </h4>
<a :href="item.fileUrl" download>{{item.fileName}}</a>
</div>
</a-modal>
</div>
</template>1.2 下载远程图片
1.2.1 图片地址后加"?response-content-type=application/octet-stream"
使用contentType访问页面的时候，浏览器就会开启下载框对其内容进行下载
<template>
<div>
<a-modal v-model:visible="props.visible" title="DownloadFile">
<div class="down-load-file" v-for = "(item, index) in fileList" :key="index">
<h4>{{item.fileType}}: </h4>
<span class="opr-btn-normal" @click="download(item.fileUrl)">{{item.fileName}}</span>
</div>
</a-modal>
</div>
</template>
<script lang="ts" setup>
import { onMounted, createVNode, reactive, defineComponent, ref } from 'vue';
// 列表
const fileList = ref<any[]>([]);
const download = (url) => {
// 处理图片下载
let newstring= url.substring(url.length-4, url.length);
if(['.png', '.jpg','jpeg', '.bmp', '.gif', 'webp', '.psd', '.svg', 'tiff'].indexOf(newstring) !== -1) {
url = url + '?response-content-type=application/octet-stream'
}
let a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("download",'');
a.setAttribute("target", "_blank");
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
}
</script>
<style lang="less">
.opr-btn-normal {
color: #007df1;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.down-load-file {
display: flex;
>span {
margin-left: 10px;
}
}
</style>1.2.2、通过 canvas 方式 保存图片
<script>
/**
* 下载图片
* @param {string} imgsrc 图片地址
*/
downloadIamge(imgsrc) {
// 新建图片对象
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
// 图片加载
image.onload = function() {
// 新建 canvas标签
let canvas = document.createElement("canvas");
// 设置 canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 添加 canvas画笔
let context = canvas.getContext("2d");
// 绘制图片
context.drawImage(image, 0, 0, image.width, image.height);
// 得到图片的 base64 编码
let url = canvas.toDataURL("image/png");
// 新建 a标签
let a = document.createElement("a");
// 新建点击事件
let event = new MouseEvent("click");
// 将图片的 base64 编码，设置为 a标签的地址
a.href = url;
// 触发点击事件
a.dispatchEvent(event);
};
// 将图片地址 设置为 传入的参数 imgsrc
image.src = imgsrc;
};
/**
* 下载方法
* @param {string} filepath 文件地址
*/
downloads(filepath) {
// isImageFile()：自定义函数，根据*后缀*判断是否是图片
if (isImageFile(filepath)){
this.downloadIamge(filepath)
} else {
this.downloadFile(filepath)
}
};
</script>2. 后台返回文件流时，用 blob 对象下载文件
// res 是返回的文件流，type 是文件MIME类型, fileName 是给下载的文件一个名称
const blobDownloadFile = (res: any, type: string, fileName: string) => {
const blob = new Blob([res], {
type: type
})
const a = document.createElement('a')
const URL = window.URL || window.webkitURL
const herf = URL.createObjectURL(blob)
a.href = herf
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(herf)
}
blobDownloadFile(url, 'text/plain', '测试')
3. JSZip 库以压缩包下载文件
JSZip库
组件中使用
import { onMounted } from 'vue'
import JSZip from 'jszip'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
let dowloadZip: JSZip
const urlToPromise = (url: string) =>
new Promise((resolve, reject) => {
JSZipUtils.getBinaryContent(url, (err: any, data: unknown) => {
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
// 添加文件
dowloadZip.file(item.fileName, urlToPromise(item.fileUrl), { binary: true })
// .generateAsync() 生成一个 zip 文件
dowloadZip
.generateAsync({ type: 'blob' })
.then(
(blob) => {
// saveAs(blob, "测试.zip"); 直接在浏览器打成 测试.zip 包并下载
saveAs(blob, '测试.zip')
},
(e) => {
console.log(e)
}
)
// 在 DOM 挂载之后创建 JSZip 实例
onMounted(() => {
dowloadZip = new JSZip()
})
