js实现前端下载文件方法
实现原理很简单就是创建一个a标签,在a标签中放入文件的路径,出发
a标签的点击事件即可。
/**
* path 和 name
*/
export function downloadFile(data) {
var a = document.createElement('a')
a.href = data.path
a.download = data.name ? data.name : '文件'
a.target = '_black'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
}
下载图片的方法同样类似
/** image 下载 */
/**
*
* @param {*} data url
* @param {*} filename 名称
*/
export function downloadImage(data, filename) {
var httpindex = data.indexOf('http')
if (httpindex === 0) {
const image = new Image()
// 解决跨域 canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function() {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
const dataURL = canvas.toDataURL('image/png')
// 生成一个 a 标签
const a = document.createElement('a')
// 创建一个点击事件
const event = new MouseEvent('click')
// 将 a 的 download 属性设置为我们想要下载的图片的名称,若 name 不存在则使用'图片'作为默认名称
a.download = filename || '图片'
// 将生成的 URL 设置为 a.href 属性
var blob = dataURLtoBlob(dataURL)
a.href = URL.createObjectURL(blob)
// 触发 a 的点击事件
a.dispatchEvent(event)
}
image.src = data
} else {
// 生成一个 a 标签
const a = document.createElement('a')
// 创建一个点击事件
const event = new MouseEvent('click')
// 将 a 的 download 属性设置为我们想要下载的图片的名称,若 name 不存在则使用'图片'作为默认名称
a.download = filename || '图片'
// 将生成的 URL 设置为 a.href 属性
a.href = data
// 触发 a 的点击事件
a.dispatchEvent(event)
}
}