/* <div id="capture" ref="divDom">
<img :src="img">
</div> */
import html2canvas from 'html2canvas'
const img = ref("https://tse1-mm.cn.bing.net/th/id/OIP-C.cykW2JFIAZEv6vWFflfjygHaEZ?pid=ImgDet&rs=1")
const base64img = ref()
const weeklyReport = () => {
console.log('生成周报')
html2canvas(document.querySelector('#capture'), {
backgroundColor: "#ffffff",
allowTaint: true, //开启跨域
useCORS: true,
scrollY: 0,
scrollX: 0,
}).then((canvas) => {
// 转换成base64格式,这个格式可以挂载到img里,也可以下载下来,也可以打压缩包下载下来
const base64 = canvas
.toDataURL()
.replace(/^data:image\/(png|jpg);base64,/, '')
base64img.value = `data:image/png;base64,${base64}`
console.log(base64img.value)
// if (window.navigator.msSaveOrOpenBlob) {
// let bstr = atob(base64img.value.split(",")[1]);
// let n = bstr.length;
// let u8arr = new Uint8Array(n);
// while (n--) {
// u8arr[n] = bstr.charCodeAt(n);
// }
// let blob = new Blob([u8arr]);
// window.navigator.msSaveOrOpenBlob(blob, "周报" + "." + "pdf");
// } else {
// // 这里就按照chrome等新版浏览器来处理
// let a = document.createElement("a");
// a.href = base64img.value;
// a.setAttribute("download", "周报");
// a.click();
// }
});
}
vue3 html2canvas 网络图片 空白 及使用
最新推荐文章于 2024-07-22 18:09:43 发布