将HTML模板转成pdf,excel,word

由于在做这个项目的时候，用的是react，所以就将这篇文章放在这里吧

• 将HTML模板转成pdf

• 2个关键点，
  1，将数据插入html模板中mustache
  2，将插入数据后的模板转成pdfjsPDF

• 根据pdf,编写html模板,也可以使用工具转，不过转出来的效果不是很理想,将要替换的数据使用mustache的写法

Image1.png

• 调后台接口，成功的得到数据

            const url = '/api/invoices/show_edit_invoice.json'
            const params = {
                user_session_key: localStorage.getItem('user_session_key'),
                id: this.invoice_id
            }
            this.http.REQUEST(url, params, method).then(res => {
                if (res.data.status.code === '20000') {
                    const data = res.data.data
                    const obj = {}
                    // 将得到的数据传过去，渲染HTML模板
                    this.exportFile(obj)
                    this.setState({ export_visible: false })
                }
            })

• 解析数据，使用mustache渲染html模板,得到的output会是一个html格式的字符串，在require html的时候，会碰到无法找到module的报错,因为缺少html-loader,nam install html-loader —save-dev,解决，同时

       {
             test: /\.html$/,
             loader: 'html'
       }
        let output
        // 根据输出不同的类型文件，使用不用HTML模板
        if (this.state.exportInvoice.value === 'pdf') {
            output = mustache.render(template_pdf, obj)
        } else if (this.state.exportInvoice.value === 'excel') {
            output = mustache.render(template_excel, obj)
        } else if (this.state.exportInvoice.value === 'word') {
            output = mustache.render(template_word, obj)
        }

• 引入JSPDf

• 这个时候得到了输出后的html字符串，现在进行处理

        // 使用iframe将其渲染到页面中，不然会出现奇葩的报错信息
        const parser = new DOMParser()
        const htmldoc = parser.parseFromString(output, 'text/html')
        const body_str = htmldoc.documentElement.getElementsByTagName('body')[0].innerHTML
        const head_str = htmldoc.documentElement.getElementsByTagName('head')[0].innerHTML

        const myiframe = document.createElement('iframe')
        myiframe.style.width = '1400px'
        myiframe.style.height = '900px'
        document.body.appendChild(myiframe)

        myiframe.contentWindow.document.body.style.backgroundColor = '#ffffff'
        if (navigator.userAgent.indexOf('Firefox') >= 0) {
            myiframe.contentWindow.document.body.innerHTML = body_str
            myiframe.contentWindow.document.head.innerHTML = head_str
        } else {
            myiframe.contentWindow.document.body.innerHTML = body_str
            myiframe.contentWindow.document.head.innerHTML = head_str
        }