前端使用html2canvas在页面截图并导出，以及截图中含有图片时的跨域问题解决
1.引入html2canvas
npm 安装或cdn引入
npm install html2canvas <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>2.使用 html2canvas
// 假设你有一个 id 为 "capture" 的元素
html2canvas(document.querySelector("#capture")).then(canvas => { // canvas 是转换后的 canvas 元素 // 你可以将 canvas 转换为图片，然后添加到 DOM 中 document.body.appendChild(canvas); // 或者，将 canvas 转换为图片 URL 并显示在 img 元素中 var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); var link = document.createElement('a'); link.download = 'screenshot.png'; link.href = image; link.click();
});3.图片跨域时的解决方法
1.服务器CORS配置：
图片所在服务器设置Access-Control-Allow-Origin: * 或 Access-Control-Allow-Origin: 你的域名 的头部。
注意，出于安全考虑，许多服务器默认不允许跨域请求。
2.设置开发服务器代理，以vue项目为例：
在vue.config.js中配置
// vue.config.js
module.exports = { devServer: { proxy: { '/file': { target: 'http://155.60.114.72:88545'//图片所在地址, changeOrigin: true, pathRewrite: { '^/file': '' } } } }
}在你的Vue组件中，你应该将图片URL更改为通过代理访问的URL
let img = '/file/7df46603b38d49af94cefb4c92d5cd27.jpg'