前端导出
//1导出 后台返回的文件路径，进行拼接下载
itemDown() {
console.log('点击了导出按钮', AIAPI.IdentifyRecord.exportIdentificationRecordById)
async () => {
const loading = this.$loading.service({
target: '#IdentifyRecord',
lock: true,
text: '正在导出...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)',
})
const params = this.ruleForm
const res = await newPost9004({
url: AIAPI.IdentifyRecord.exportIdentificationRecordById,
data: params,
})
const { code, message, data } = res.data
loading.close()
if (code === 200) {
const downloadFileA = document.createElement('a')
document.body.append(downloadFileA)
//自己定义的路径 加上 后端返回的路径
downloadFileA.href = this.Url + '/' + data
downloadFileA.download = ''
downloadFileA.rel = 'noopener noreferrer'
downloadFileA.click()
document.body.removeChild(downloadFileA)
this.$message.success('导出成功!')
} else {
this.$message.error(message)
}
}
},
//2 导出 后端返回二进制流文件 拿到结果在进行类型转换
async itemDown() {
const loading = this.$loading.service({
target: '#IdentifyRecord',
lock: true,
text: '正在导出...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const params = this.ruleForm
/*
* 解析blob响应内容并下载
* @param {*} res blob响应内容
* @param {String} mimeType MIME类型
*/
function resolveBlob(res, mimeType) {
const aLink = document.createElement('a')
let blob = new Blob([res.data], { type: mimeType })
let fileName = '识别记录.xlsx'
aLink.href = URL.createObjectURL(blob)
aLink.setAttribute('download', fileName) // 设置下载文件名称
document.body.appendChild(aLink)
aLink.click()
document.body.removeChild(aLink)
}
let res = await newPost9004({
method: 'post',
url: AIAPI.IdentifyRecord.exportIdentificationRecordById,
data: params,
responseType: 'blob'
})
resolveBlob(
res,
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
)
loading.close()
},
图片地址转 base64
//点击动植物ai识别获取当前行的数据
aiDistinguish(item) {
let base_url = item.img[0].url //后台获取的图片路径
let isBase = false
getBase64(base_url)
.then(function(base64) {
// const that = this 转base64成功之后要做的事情
localStorage.setItem('url2', base64)
isBase = true
// console.log(base64)
}, function(err) {
console.log(err)
})
//主方法 用来图片地址转base64的
function getBase64(img) { // 传入图片路径，返回base64
function getBase64Image(img, width, height) { // width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
let canvas = document.createElement('canvas')
canvas.width = width ? width : img.width
canvas.height = height ? height : img.height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
let dataURL = canvas.toDataURL()
return dataURL
}
let image = new Image()
image.crossOrigin = ''
image.src = img
let deferred = $.Deferred()
if (img) {
image.onload = function () {
deferred.resolve(getBase64Image(image))// 将base64传给done上传处理
}
return deferred.promise()// 问题要让onload完成后再return sessionStorage['imgTest']
}
}
if (isBase) {
let path = '/index/aiIdentify/onlineAIRecognition'
this.$router.push(path)
}
},
单击按钮video截图_图片保存至本地比获取图片地址转成base64的相关信息
// 动植物AI识别按钮
aiDistinguish() {
let fileName = '识别图片'
savePic(fileName)
function savePic(fileName) {
let fileType = 'png' // 如果文件名中没有带后缀，默认使用png
let video = document.querySelector('#ai_pich') // 找到需要截图的video标签
let canvas = window.canvas = document.createElement('canvas')
canvas.width = video.videoWidth
canvas.height = video.videoHeight
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height) // 图片大小和视频分辨率一致
let strDataURL = canvas.toDataURL('image/' + fileType) // canvas中video中取一帧图片并转成dataURL
let arr = strDataURL.split(',')
//获取了 转成base64的文件
localStorage.setItem('url', strDataURL)
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
let blob = new Blob([u8arr], {
type: mime
})
let url = window.URL.createObjectURL(blob)
let a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
setTimeout(function () {
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
}, 1000)
}
let path = '/index/aiIdentify/onlineAIRecognition'
this.$router.push(path)
},
将base64转成文件类型
function dataURLtoFile(dataurl, filename) { // 将base64转换为文件
let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1]); let n = bstr.length; let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}
新增导出具体代码
<el-button plain size="small" class="but1" @click="handleDown" v-loading="loading1">导出</el-button>
import { getRllDataPageExport } from "@/api/dataAnalysis";
handleDown() {
this.loading1=true;
let params = {
startTime: this.params.startTime + ' 00:00:00',
endTime: this.params.endTime + ' 23:59:59',
projectId: this.params.projectId
};
getRllDataPageExport(params).then(res => {
//res后端范湖的是blob文件流
//文件流处理
let blob = new Blob([res], { type: "application/vnd.ms-excel" });
//创建一个隐藏的a链接
const a = document.createElement("a");
//将a标签添加到body中
document.body.appendChild(a);
//去除a标签的样式
a.style.display = "none";
//设置连接地址
a.href = URL.createObjectURL(blob);
//设置下载文件的名称
a.download = '人流量数据.xlsx';
//模拟点击事件
a.click();
//移除创建的a标签和下载地址
document.body.removeChild(a);
window.URL.revokeObjectURL(a.href);
this.loading1=false;
}).catch(err=>{
console.log('err',err)
})
},
// dataAnalysis.js文件中定义 getRllDataPageExport接口
// 注意事项：responseType: 'blob'
export function getRllDataPageExport(params, encryptType = 1) {
return request({
url: `/dataHistory/getRllDataPageExport`,
method: 'get',
responseType: 'blob',
params: {
...params,
encryptType
}
})
}
注意事项：responseType: ‘blob’