1.在main.ts中
import html2canvas from 'html2canvas';
import printJS from 'print-js'
const app = createApp(App);
// 全部打印自定义
app.directive('printModal', {
mounted(el, binding) {
el.addEventListener('click', async () => {
const modal = document.querySelector('.modal'); // 选择你要截取的弹窗元素
const canvas = await html2canvas(modal); // 将弹窗内容转换为图片
const image = canvas.toDataURL('image/png'); // 将图片转换为Data URL
if (binding.value == 1) {
printJS({
printable: image,
type: 'image',
documentTitle: '',
imageStyle: 'width:100%;'
})
} else {
const a = document.createElement('a');
a.href = image;
a.download = '图片';
a.click();
}
});
}
});
2.使用
<el-button type="primary" v-print-modal="0">下载</el-button>
<el-button type="primary" v-print-modal="1">打印</el-button>