注意:有些网站可能由于canvas跨域污染问题,无法使用toBlob,所以无法转换
开发者工具中,选中需要转换的canvas元素(使其可以使用$0语法)
控制台输入如下代码
$0.toBlob(function (blob) {
var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "image.png";
link.click();
}, "image/png");
优化,转换为pdf
fetch("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js")
.then((response) => response.text())
.then((scriptText) => {
eval(scriptText);//执行脚本
// 现在可以使用 jsPDF 了
const pageList = document.querySelectorAll("canvas");
const { jsPDF } = window.jspdf;
async function convertCanvasToPDF(pageList, pdfFileName) {
const pdf = new jsPDF();
for (let i = 0; i < pageList.length; i++) {
const canvas = pageList[i];
if (canvas) {
const imgData = canvas.toDataURL("image/png");
if (i > 0) {
pdf.addPage(); // 在不是第一页的情况下添加新页面
}
pdf.addImage(imgData, "PNG", 0, 0, 210, 290);
}
}
pdf.save(pdfFileName);
}
// 使用示例
convertCanvasToPDF(pageList, "output.pdf");
});