window.print()实现打印指定内容——功能实现

原创已于 2024-03-13 16:33:59 修改 · 538 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-03-13 15:13:36 首次发布

vue3 同时被 2 个专栏收录

20 篇文章

订阅专栏

js方法

5 篇文章

订阅专栏

文章介绍了如何使用html2canvas库将HTML内容转换为图片，结合print-js插件实现网页中的DOM元素的打印功能，提供了一个简单的JavaScript函数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div>
   不需要打印的内容
 </div>
 <div id='formContent' ref="formContent">
      
   需要打印的内容
 </div>
<a-button type="primary"  @click="print">打印</a-button>


import html2canvas from 'html2canvas';
import printJS from 'print-js';
const formContent=ref();
//将dom转图片然后打印图片，dom转图片使用html2Canvas，打印使用printjs插件
const print=()=>{
    const targetDom = document.querySelector('#formContent');
    html2canvas(formContent.value, {
      backgroundColor: null,
      useCORS: true,
      height: targetDom.scrollHeight,
      width: targetDom.scrollWidth,
    }).then((canvas) => {
      const url = canvas.toDataURL();
      printJS({
        printable: url,
        type: 'image',
        documentTitle: '打印图片',
        targetStyles: ['*'],
      });
    });
};