vue3 自定义事件 打印网页

1.在main.ts中
 

// npm install --save html2canvas
//npm install print-js --save

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>