Preface
-
In actual development, we often encounter scenarios of downloading files, such as downloading contracts, downloading files
-
There are two ways to download files. One is that the backend returns a binary stream, and the frontend accepts downloads according to different types through blob objects.
-
There is also a way to directly open the address in a new browser window and open the pdf to preview and download, and other files can be downloaded directly.
-
But no matter which way, the principle is the same, it just depends on who executes the conversion code
Code
1. Encapsulation api-depends on the direct back-end interface (note that it must be marked as a binary file stream when requesting)
// 文件-图片下载
export function downloadfile (data) {
return request({
url: '/download/file',
method: 'post',
data,
// 指定请求类型为二进制流
// 不写可能会造成下载成功的图片和文件是看不到和没有内容的
responseType: 'blob'
})
}2. Downloading different files and pictures may be frequently used in projects - it can be encapsulated into a method.
2.1Create the download.js file under utils
export default {
// 下载 Excel 方法
excel (data, fileName) {
this.download(data, fileName, 'application/vnd.ms-excel')
},
// 下载 Word 方法
word (data, fileName) {
this.download(data, fileName, 'application/msword')
},
// 下载 Zip 方法
zip (data, fileName) {
this.download(data, fileName, 'application/zip')
},
// 下载 Html 方法
html (data, fileName) {
this.download(data, fileName, 'text/html')
},
// 下载 Markdown 方法
markdown (data, fileName) {
this.download(data, fileName, 'text/markdown')
},
// 下载 pdf 方法
pdf (data, fileName) {
console.log('data', data)
console.log('fileName', fileName)
this.download(data, fileName, 'application/pdf')
},
// 下载 图片方法
png (data, fileName) {
this.download(data, fileName, 'application/png')
},
// 兼容写法
stream (data, fileName) {
this.download(data, fileName, 'application/octet-stream')
},
download (data, fileName, mineType) {
// 创建 blob对象
let blob = new Blob([data], { type: mineType })
// 浏览器api 有的不支持-二种都写
window.URL = window.URL || window.webkitURL
// 获取链接地址-(内容赋值到临时链接)
let href = URL.createObjectURL(blob)
// 创建a标签
let downA = document.createElement('a')
// 把链接赋值给a标签
downA.href = href
// 赋值文件名称
downA.download = fileName
// 点击下载
downA.click()
// 销毁超连接
window.URL.revokeObjectURL(href)
}
}3. Use in the page
// html
<el-button type="info" @click="addclose">下载</el-button>
// data
datafile: {
url: '文件或者图片地址'
}
// 引入方法
import download from '@/utils/download'
// 方法
// 下载
async addclose () {
const res = await downloadfile(this.datafile)
// 下载图片
// 针对性的类型-名称带不带.png都不会受影响
// download.png (res,'测试图片')
// 带后缀
// download.png (res,'测试图片.png')
// 下载pdf文件
// 针对性的类型-名称带不带.pdf都不会受影响
// download.pdf (res,'pdf文件')
// 带后缀
download.pdf (res,'pdf文件.pdf')
// 公共方法
// application/octet-stream 相当于公共类型-需要在名称带上指定的后缀-不然下载下来的文件没有后缀名打不开
// download.stream (res,'公共方法.png')
// download.stream (res,'公共方法.pdf')
}Notice
-
First check whether the format of the downloaded file is correct. If it is not correct, check the blob object type (the name also depends on whether it has a suffix)
-
If you find that the format suffix of the downloaded file is correct, the content and pictures are empty and invisible, check whether the backend converts the content into a stream, and whether the frontend sets responseType: 'blob' when encapsulating the api.
Summarize:
After this process, I believe you will also have an initial deep impression on the vue backend returning the binary stream - the frontend downloading the file through the blob object - the image, but in actual development the situation we encounter is definitely different, so we To understand its principle, it will never change without departing from its origin. Come on, hit the workers!
Please point out any shortcomings, thank you - Feng Guo Wuhen