补充:在请求时因为报以下错误,一般都是因为我们的网站是HTTPS的,而对方的链接是HTTP协议的,因此在Ajax或者javascript请求时,就会报如下这种错误:
>解决方法: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
单个有url的oss链接,直接下载的话 FileSaver.saveAs(list[0].qr_code,
${list[0].title}.jpg
) // 通过fileSaver导出下载图片
封装批量下载方法
//数据
imgesArr:[
{
url:'http://jingshipeihu.oss-cn-hangzhou.aliyuncs.com/patrol_code/20220630/ff02cca980ecd44887f0970f529847ca.jpg',
name:'first'
},
{
url:'http://jingshipeihu.oss-cn-hangzhou.aliyuncs.com/patrol_code/20220630/610dff0dd546a831dc11376a251580e5f.jpg',
name:'second'
}
]
// 逻辑
// 下载二维码图片并压缩
getImgArrayBuffer(url){
return new Promise((resolve,reject) => {
//通过请求获取文件blob格式
let xmlHTTP = new XMLHttpRequest()
xmlHTTP.open('GET',url,true)
xmlHTTP.responseType = "blob";
xmlHTTP.onload = function() {
if(this.status == 200 ){
// console.log(this.response)
resolve(this.response)
}else{
// console.log(this.status)
reject(this.status)
}
}
xmlHTTP.send()
})
},
// 批量下载
batchDownload(){
let zip = new JSZip()
var imgObj = {}
let promises = []
for(let obj of this.imgesArr){
const promise = this.getImgArrayBuffer(obj.url).then(data => {
zip.file(obj.name + '.png', data , {binary:true}); // 逐个添加文件
imgObj[obj.name] = data
})
promises.push(promise)
}
this.$message('正在压缩,请稍后!')
Promise.all(promises).then(async () => {
try {
const content = await zip.generateAsync({type:'blob'})
// console.log(content)
await FileSaver.saveAs(content,'压缩图片')
this.$message("压缩完成")
} catch (error) {
console.log(error)
}
// zip.generateAsync({type: 'blob'}).then(content => {
// this.$message('正在压缩,请稍后!')
// console.log(content)
// FileSaver.saveAs(content,'压缩图片') // 利用file-saver保存文件 自定义文件名
// this.$message("压缩完成")
// }).catch(res => {
// console.log(111111)
// console.log(res)
// })
})
}
}
然后再使用batchDownload方法
封装的方法
import FileSaver from 'file-saver'
import JSZip from 'jszip'
// 单个二维码导出
export const singleExportQRCode = (url,name ) =>{
// console.log(url)
// console.log(name)
if(!name){
FileSaver.saveAs(url) // 未传入导出图片名称
}else{
FileSaver.saveAs(url,`${name}.jpg`) // 通过fileSaver导出下载图片
}
}
// 下载二维码图片并压缩
function getImgArrayBuffer (url){
return new Promise((resolve,reject) => {
//通过请求获取文件blob格式
let xmlHTTP = new XMLHttpRequest()
xmlHTTP.open('GET',url,true)
xmlHTTP.responseType = "blob";
xmlHTTP.onload = function() {
if(this.status == 200 ){
// console.log(this.response)
resolve(this.response)
}else{
// console.log(this.status)
reject(this.status)
}
}
xmlHTTP.send()
})
}
// 批量二维码导出
export const batchExportQRCode = list => {
let zip = new JSZip()
var imgObj = {}
let promises = []
for(let obj of list){
const promise = getImgArrayBuffer(obj.qr_code).then(data => {
zip.file(obj.title + '.jpg', data , {binary:true}); // 逐个添加文件
imgObj[obj.title] = data
})
promises.push(promise)
}
// console.log(promises)
Promise.all(promises).then(async () => {
try {
const content = await zip.generateAsync({type:'blob'})
await FileSaver.saveAs(content,'压缩图片')
// const newDate = +new Date()
// console.log('new-',newDate)
} catch (error) {
console.log(error)
}
})
}