前端实现生成Excel表格并打印功能

最新推荐文章于 2024-05-20 12:45:00 发布

进击的Orime

最新推荐文章于 2024-05-20 12:45:00 发布

阅读量1.6k

点赞数

分类专栏：开发技巧文章标签： javascript html5 reactjs

本文链接：https://blog.csdn.net/weixin_41876574/article/details/102792691

版权

开发技巧专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React中实现生成Excel表格并打印功能

工作中遇到了一个需求，要求根据后台返回的数据，生成一个签到表然后可以打印。

成品展示：

打印登记表最终效果

解决思路：

1、原生table创建表格并设置样式
2、调用浏览器底层打印方法

代码演示：

结构样式部分：

<div key="demo1">
          <Card bordered={false}>
            <div style={{ width: '100%' }}>
              <div style={{ marginBottom: 10 }}>
                <button
                  onClick={() => printInfo()}
                  style={{
                    backgroundColor: '#1890ff',
                    border: '0',
                    borderRadius: '15px',
                    width: '100px',
                    color: '#fff',
                    cursor: 'pointer',
                  }}
                >
                  打印
                </button>
              </div>
              <div id="print1" style={{ pageBreakAfter: 'always' }}>
                <div style={{ textAlign: 'center', fontSize: 'large', fontWeight: '600' }}>
                  培训签到表
                </div>
                <table
                  style={{
                    verticalAlign: 'middle',
                    textAlign: 'center',
                    width: '100%',
                    marginTop: 8,
                  }}
                  border="1px solid #e8e8e8"
                  cellPadding="3"
                  cellsPacing="0"
                >
                  <tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
                    <td width="10%">培训名称</td>
                    <td width="40%">食品安全管理员培训</td>
                    <td width="10%">时间</td>
                    <td width="40%">2019-10-28 12:00:00 ~ 2019-10-29 12:00:00</td>
                  </tr>
                  <tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
                    <td width="10%">地点</td>
                    <td width="40%">二楼204会议室</td>
                    <td width="10%">培训方式</td>
                    <td width="40%">线下培训</td>
                  </tr>
                  <tr style={{ fontSize: 'medium', fontWeight:"bold" }}>
                    <td width="10%">姓名</td>
                    <td width="40%">签字</td>
                    <td width="10%">姓名</td>
                    <td width="40%">签字</td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>
                  <tr style={{ fontSize: 'medium' }}>
                    <td width="10%">张三</td>
                    <td width="20%"></td>
                    <td width="10%">李四</td>
                    <td width="20%"></td>
                  </tr>

                </table>

              </div>
            </div>
          </Card>
        </div>

函数实现部分：

/**
 * 打印
 */
export function printInfo() {
  const html = window.document.getElementById('print1').innerHTML;
  const win = window.open('', '打印', 'height=1100,width=1100');
  win.document.write('<html><head><title></title>');
  win.document.write('</head><body >');
  win.document.write(html);
  win.document.write('</body></html>');
  win.document.close();
  win.focus();
  win.print();
  win.close();
};

原理分析：

通过为div绑定iddiv id="print1"，将整个表头+表格主题与printInfo相关联，再调用浏览器底层window.open方法，将所有需要打印出来的内容以HTML的形式写入
通过更深一步了解得知，window.open是打开新窗口的命令，而window.print才是-打印的命令
菜鸟教程——window.prin()

进击的Orime

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端实现生成Excel表格并打印功能

React中实现生成Excel表格并打印功能成品展示：解决思路：代码演示：结构样式部分：函数实现部分：原理分析：工作中遇到了一个需求，要求根据后台返回的数据，生成一个签到表然后可以打印。成品展示：解决思路：1、原生table创建表格并设置样式2、调用浏览器底层打印方法代码演示：结构样式部分：<div key="demo1"> <Card bo...
复制链接

扫一扫