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，這裏直接貼修改以後的代碼，路徑不要寫錯了。

 

 若是有問題，請留言。