vue3中使用printJs转图片打印

一、安装

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

//不需要打印的元素添加 data-html2canvas-ignore 属性
<div class="operateArea boxSd setBtn" data-html2canvas-ignore :key="item.key">
	<el-button v-if="lItem.btnType == 'print'"  @click="openPrint()">{{ $t(lItem.label) }}</el-button>
</div>

<script setup>
import html2canvas from 'html2canvas';
import printJS from 'print-js'
// printJs转图片打印
function openPrint(){
   proxy.$modal.msgSuccess(t('element255'), 2000)

   setTimeout(()=>{
      html2canvas(curPage.value, {
            backgroundColor: '#ffffff',
            useCORS: true,
            // width: window.screen.availWidth,
            // height: window.screen.availHeight,
            windowHeight: document.body.scrollHeight,
            y:window.pageYOffset
      }).then((canvas) => {
            // let url = canvas.toDataURL('image/jpeg', 1.0)
            const url = canvas.toDataURL()
            //打印图片
            printJS({
               printable: url,
               type: 'image',
               style: `@media print { @page {size: auto; margin: 0; } body{margin:0 5px}}`,
               documentTitle: '',
            })
            // base64格式图片打印查看
            // console.log(url)
      })
   },100)
}
</script>