加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react 如何引入打印控件 CLodop

发布时间:2020-12-15 16:17:30 所属栏目:百科 来源:网络整理
导读:下载插件,官网地址?http://www.lodop.net/download.html? ,选择综合版,解压下载的文件。直接点击 安装,很简单,就不一一说明了。 复制下面几个文件,到react项目中 ? ?引入?LodopFuncs.js 和js中的??getLodop 方法 import { getLodop } from ‘ ./print/

下载插件,官网地址?http://www.lodop.net/download.html? ,选择综合版,解压下载的文件。直接点击 安装,很简单,就不一一说明了。

复制下面几个文件,到react项目中

?

?引入?LodopFuncs.js 和js中的??getLodop 方法

import { getLodop } from ./print/LodopFuncs;

这里有个小问题,如果直接 引入LodopFuncs.js,会报错

react环境下找不到getLodop 和 CLODOP对象,需要在前面添加window。

下面就是使用的完整代码,至于clodop里面的属性就不一一讲解了,别太懒,自己去看,官网也可以下载api文档,好好学习,天天向上(哈哈哈)

import React from ‘react‘;
import { Button } from ‘antd‘;
import { getLodop } from ‘./print/LodopFuncs‘;

class ReportFormPrint extends React.Component {

    printPageView = () => {
        let LODOP = getLodop();
        LODOP.PRINT_INIT("react使用打印插件CLodop");  //打印初始化
        let strStyle = `<style> 打印的样式需要写在这里,下面引入</style> `;
        LODOP.ADD_PRINT_HTM(100,"5%","90%",450,strStyle + document.getElementById("print").innerHTML);
        LODOP.PREVIEW();  //最后一个打印(预览)语句
    };

    render() {

        return (
            <div>
                <Button type="primary" onClick={this.printPageView} >打印</Button>
                <div id="print"> 打印的内容</div>
            </div>
        )
    }
}
export default ReportFormPrint;

还有个问题,之前我们放了有四个文件,现在只使用了一个,还有其他三个,是为了防止使用者在打印页面时,电脑没有安装插件的时候,给用户直接下载插件的链接,不用去官网搜。这里也需要修改LodopFuncs.js,这里直接贴修改之后的代码,路径不要写错了。

?

?如果有问题,请留言。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读