之前有一个需求是点击导出按钮,然后去各个页面截图,将图片传给后端,后端返回文件流,导出ppt报告。这个需求听到的时候头都大了,不知道怎么做,之后有思路了,在实现过程中也出现了各种问题,最后还是做完了( 撒花!)
一、首先来说一下单个页面截图
单个页面截图是比较简单的,通过插件domtoimage可以实现。
1.安装插件
yarn add dom-to-image
2.在需要截图的页面jsx里面引入该插件
import domtoimage from "dom-to-image";
3.截图
async function check() {
let dom_policy = document.getElementById("policy");
let formData_total = new FormData();
if (dom_policy) {
// 执行dom加载完成后的操作,例如echart的初始化操作
await domtoimage.toPng(dom_policy).then((dataUrl) => {
let formData = new FormData();
let img = base64ToBlob(dataUrl, "命名.png");
formData.append("port_presentation", img);
if (formData.has("port_presentation")) {
formData_total.append(
"area_review",
formData.getAll('port_presentation')
);
}
});
}
}
这里对代码进行一些解释:
(1)因为在该页面我需要截图两张,所以我在截图前创建一个fromData来存储两张截图
let formData_total = new FormData();
formData_total相当于就是一个对象。
(2)每次截图完我需要一个对象来保存我的图片,因此在每个截图操作里面,我又创建了一个formData来存储
let formData = new FormData();
(3)因为new FromData()出来的相当于是一个对象,因此需要属性和属性值。
formData.append("port_presentation", img);
(4)将formData里面的值展开
formData.getAll('port_presentation')
(5)base64ToBlob是将截图的数据进行转化
let img = base64ToBlob(dataUrl, "命名.png");
(6)补充一下,formData.has可以检测当前属性是否有值
formData.has('port_presentation')
截图完了,就可以发送请求给后端了
这里我采用的是fetch发送请求
fetch(window.location.origin + `请求路径`, {
responseType: "blob",
method: "post",
body: formData_total,
}).then((res) => {
const filename = res.headers
.get("content-disposition")
.split(";")[1]
.split("=")[1];
res.blob().then((blob) => {
const link = document.createElement("a");
link.style.display = "none";
// a 标签的 download 属性就是下载下来的文件名
link.download = filename;
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
// 释放的 URL 对象以及移除 a 标签
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
});
}).catch((res)=>{
alert('导出失败')
})
二、接下来说说多个页面截图
多个页面截图就是这个页面截图完了,自动跳到下个页面截图,一直到所有需要截图的页面截完为止,再发送请求。
我的框架是react,因此我用的状态机将各个页面联系起来。去改变状态机的值,让截图页面接受截图信号,进行自动跳转截图。
1.状态机,初始值设置为"导出ppt"
2. 点击导出按钮时,通过navigate进行路由跳转,并改变保存在状态机的值
dispacth(pptActions("下一个页面的命名(比如:你好react)"));
setTimeout(() => {
navigate("下一个页面的路由");
}, 3000);
3.自动跳转到下一个页面时,需要去获取刚刚保存到状态机的值,是否为"你好react",进行截图信号判断,执行截图函数check()。
//截图信号
const ppt_key = useSelector((state) => {
return state.ppt;
});
useEffect(() => {
if (ppt_key == "你好react") {
setTimeout(()=>{
check();
},3000)
}
}, [ppt_key]);
4.截图函数跟单页面差不多,但是由于会涉及到几十张截图,数量较大,因此我单独写了一个js文件来进行汇总截图文件。
async function check() {
let dom_policy = document.getElementById("policy");
let dom_map = document.getElementById("map");
// console.log(dom_policy);
let formData_total = new FormData();
if (dom_policy && dom_map) {
// 执行dom加载完成后的操作,例如echart的初始化操作
await domtoimage.toPng(dom_policy).then((dataUrl) => {
let formData = new FormData();
let img = base64ToBlob(dataUrl, "命名.png");
formData.append("port_presentation", img);
if (formData.has("port_presentation")) {
formData_total.append(
"area_review",
formData.getAll('port_presentation')
);
summaryFormData(formData.getAll('port_presentation'),'',"命名.png");
}
});
if(formData_total.has('area_review')){
dispacth(pptActions('下一个页面的命名'));
setTimeout(()=>{
navigate('下一个页面的路径');
},5000)
}
}
}
汇总js文件
let formData_ppt = new FormData();
export const summaryFormData = (value, title, name, result) => {
if (
name == "命名.png" ||
name == "命名.png" ||
name == "命名.png"
) {
formData_ppt = new FormData();
}//为了分段发送请求,一次性发送大量数据会有问题,部分数据拿不到,因此这里就分成了3段
let blob = new Blob(value);
let file = new File([blob], name, { type: "image/png" });//这里根据后端需要需要加type类型
//这里根据后端需要的参数名,进行属性和属性值的添加
if (title == "") {
formData_ppt.append("area_review", file);
} else if (title == "") {
formData_ppt.append("edition_set", file);
} else if (title == "") {
formData_ppt.append("trend_predict", file);
} else if (title == "") {
formData_ppt.append("zero_carbon", file);
}
if (result == "完") {
formDataFounction(formData_ppt, 0);
}
};
function formDataFounction(value, num) {
if (num == 0) {
fetch(window.location.origin + `请求路径`, {
method: "post",
body: value,
})
.then((response) => response.json())
.then((data) => {
console.log(data)
})
.catch((res) => {
alert("导出失败");
});
} else {
fetch(window.location.origin + `请求路径`, {
responseType: "blob",
method: "post",
body: value,
}).then((res) => {
localStorage.removeItem("edition_list");
localStorage.removeItem("scene_list");
localStorage.removeItem("number");
const filename = res.headers
.get("content-disposition")
.split(";")[1]
.split("=")[1];
res.blob().then((blob) => {
const link = document.createElement("a");
link.style.display = "none";
// a 标签的 download 属性就是下载下来的文件名
link.download = filename;
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
// 释放的 URL 对象以及移除 a 标签
URL.revokeObjectURL(link.href);
document.body.removeChild(link);
document.body.removeChild(exportPpt);
});
}).catch((res)=>{
document.body.removeChild(exportPpt);
alert('导出失败')
})
}
}
之后的每个页面都重复3、4,当一个阶段截图完成时,就发送一个信号让汇总js文件知道,可以发送请求了。我这里用的是多传一个参数"完"。
这里需要注意的是,用fetch发送请求,想要拿到返回的data数据,需要先执行
.then((response) => response.json())
才可以拿到。
具体参照上面的代码吧。
可能没说清楚,主要是太多了,有问题评论区讨论哦。