react实现打印功能

绝地灬酷狼 2022-08-31 06:45 338阅读 0赞

## 1.首先需要个库 ##

import html2canvas from 'html2canvas'

## 2.封装 ##

/* 打印封装 id:dom的ID选择器 */
    export const handlePrint = (id: any) => { 
      // 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印
      const dom = document.getElementById(id) as any;
      html2canvas(dom, { 
        scale: 2,
        width: dom.offsetWidth,
        height: dom.offsetHeight,
      }).then((canvas) => { 
        const context = canvas.getContext('2d') as any;
        context.mozImageSmoothingEnabled = false;
        context.webkitImageSmoothingEnabled = false;
        context.msImageSmoothingEnabled = false;
        context.imageSmoothingEnabled = false;
        const src64 = canvas.toDataURL();
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const imgWidth = 800; // 根据纸张宽度设定
        const imgHeight = (800 / contentWidth) * contentHeight;
        const img = new Image();
        const div = document.createElement('div');
        div.appendChild(img);
        img.setAttribute('src', src64);
        img.setAttribute('width', imgWidth as any);
        img.setAttribute('height', imgHeight as any);
        img.setAttribute('id', 'imgs');
        div.setAttribute('id', 'printImg');
        document.body.appendChild(div);
        window.document.body.innerHTML = (window as any).document.getElementById('printImg').innerHTML;
        img.onload = () => { 
          window.print();
          window.location.reload();
        };
      });
    };

## 3.去除页脚样式 ##

//直接在样式中加入
    @page { 
      margin-top: 0;
      margin-bottom: 0
    }

## 4.引入并调用方法即可 ##

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实现打印功能

端实现打印功能的方法有很多方法一：window.print() window.print()默认打印的body的内容如果想实现局部打印，就要重新给body...

清疚/ 2024年04月17日 05:38/ 0 赞/ 4 阅读

相关使用JS实现打印功能

文章目录直接上代码效果如图 > 通常我们会遇到打印报表或者页面内容，这里介绍一种很方便只有几行代码就能实现打印需求的方法。直接上代码

女爷i/ 2022年12月17日 08:56/ 0 赞/ 134 阅读

相关 vue项目实现打印功能

使用的一个叫做“vue-print-nb”的插件，具体步骤： 1.下载插件：npm install vue-print-nb --save 2.在main导入并注册：

喜欢ヅ旅行/ 2022年10月17日 00:40/ 0 赞/ 256 阅读

相关 vue打印功能实现

vue打印功能实现效果图其中有一个是可编辑的文本效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3

小灰灰/ 2022年09月04日 07:56/ 0 赞/ 138 阅读

相关 react实现打印功能

1.首先需要个库 import html2canvas from 'html2canvas' 2.封装 / 打印封装 id:dom的ID选择器 /

绝地灬酷狼/ 2022年08月31日 06:45/ 0 赞/ 339 阅读

相关 javaScript实现网页表格打印功能

一、首先，新建一个html文件，在html中导入js文件，如下： <script language="javascript" src="LodopFuncs

痛定思痛。/ 2022年07月13日 03:25/ 0 赞/ 419 阅读

相关 lodop实现打印的功能(上)

哎.编辑起来太烦了.重新写一个吧.详情优化版见lodop实现打印的功能(下) 奶茶店杯子上的标签使用的是lodop的一个前端插件吧... head头中引入标签打印的js

r囧r小猫/ 2022年06月02日 09:59/ 0 赞/ 275 阅读

相关 lodop实现打印的功能(下)

下文都是重点,先码代码,再讲原因: jsp页面引入lodopfuncs.js文件 <%--添加打印lodop.js--%> <script src=

- 日理万妓/ 2022年06月01日 02:53/ 0 赞/ 547 阅读

相关 react功能实现-组件创建

这里主要从两个角度来分析创建一个组件需要怎么做,一个是元素,一个是数据.整理向,大量借鉴,非原创. 1.渲染组件. 我们先明确一点,所有的元素都必须通过render方

「爱情、让人受尽委屈。」/ 2021年11月23日 17:10/ 0 赞/ 256 阅读

相关 js打印功能案例及实现

建议： 1、不需修改的页面可以用当前页局部打印。案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta ch...

朱雀/ 2021年01月19日 14:46/ 0 赞/ 600 阅读