1.如果知道了网络的url,进行下载
(1).方式1:使用h5的标签,一定要写href和download,href指向的是目标url,download可以指定下载的文件名
<a :href="url" target="_blank" download>
<el-button size="small" type="primary">下载</el-button>
</a>
(2)方式2:
<a id="fileUrl" style="display: none"/>
downloadFile() {
var fileName = this.getFileName(this.resourcesContent)
const fileUrl = document.getElementById('fileUrl')
fileUrl.setAttribute('href', this.url)
fileUrl.setAttribute('download', 'xxx.xls')
fileUrl.click()
},
2.同源下载,文件放在前端的/src/assets文件夹下
在data定义的变量:
imgSrc: 'http://' + window.location.host + '/src/assets/images/logo-2.png',
定义的按钮
<img :src="imgSrc" alt="">
<a :href="imgSrc" target="_blank" download>
<el-button size="small" type="primary">下载</el-button>
</a>
3.跨域下载文件
downloadImage() {
const src = this.url
var fileName = this.getFileName(this.url)
var canvas = document.createElement('canvas')
var img = document.createElement('img')
img.onload = function(e) {
canvas.width = img.width
canvas.height = img.height
var context = canvas.getContext('2d')
context.drawImage(img, 0, 0, img.width, img.height)
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
canvas.toBlob((blob) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = fileName
link.click()
}, 'image/jpeg')
}
img.setAttribute('crossOrigin', 'Anonymous')
img.src = src
},
getFileName(url) {
var urlSlashCount = url.split('/').length
return url.split('/')[urlSlashCount - 1].toLowerCase()
},