react 如何引入打印控件 CLodop

下載插件，官網地址 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，這里直接貼修改之后的代碼，路徑不要寫錯了。

 

 如果有問題，請留言。