1. 封装一个公共的截图函数
import html2canvas from 'html2canvas'
export const screenshot = (id: any, name: any, isReturn?: boolean) => {
const dom = document.getElementById(id)
const screenshotCanvas: any = document.getElementById('screenshotCanvas')
if (!dom || !screenshotCanvas) return
const w = dom.offsetWidth
const h = dom.offsetHeight
screenshotCanvas.width = w * 2
screenshotCanvas.height = h * 2
const opts: any = {
canvas: screenshotCanvas,
width: w,
height: h,
backgroundColor: 'rgba(6, 8, 16)',
useCORS: true
}
html2canvas(dom, opts).then((canvas: any) => {
if(IEVersion()) {
var blob = canvas.msToBlob();
navigator.msSaveBlob(blob, `${name}.png`);
return;
}
const dataURL = canvas.toDataURL('image/png')
if (isReturn) {
console.log(dataURL);
return dataURL
} else {
const a = document.createElement('a')
a.download = name
a.href = dataURL
if (myBrowser() === 'FF') {
a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
return
}
a.click()
}
})
}
2. 在最外层dom里放一个隐藏的canvas标签,用于整个项目截图时使用
<canvas style={{display: 'none'}} id="screenshotCanvas"></canvas>
3. 使用
import { screenshot } from '@/assets/js/public';
const img = screenshot('domId', '图片名', true)