react实现下载(download属性，jspdf，html-docx-js，wkhtmltopdf)

一、最简单的方法：利用download属性

download属性内填值表示指定下载的文件名 

<a href={Pig} download="details.jpeg">下载</a>

<a href={Pig} download>下载</a>

二、jspdf（比较简单，但是不能转化网页内的图片）

如果想在下载完成后，执行setState，那么先在dowload事件开头定义：const self = this;然后在pdf.save语句后执行self.setState({  });

npm install jspdf --save
npm install react-dom --save

import React, { Component } from "react";
import "./App.css"
import { renderToString } from "react-dom/server";
import jsPDF from "jspdf";
class Prints extends Component {
  render() {
    return (
      <div>
        <p style={{fontSize:18,color:"purple"}}>Convert webpage to pdf format and download</p>
      </div>
    );
  }
}
const print = () => {
  const string = renderToString(<Prints />);
  const pdf = new jsPDF("p", "mm", "a4",'JPEG', 0, 0, 100, 50);
  pdf.fromHTML(string);
  pdf.save("pdf");
};
class App extends Component {
  render() {
    return (
      <div>
        <Prints />
        <button onClick={print}>print</button>
      </div>
    );
  }
}
export default App;

三、html2canvas + jsPDF单页

import React, { Component } from "react";
import "./App.css"
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import Pig from "./pig.jpg"
class App extends Component {
  download() {
    html2canvas(document.body).then(function(canvas) {
      //返回图片dataURL，参数：图片格式和清晰度(0-1)
      var pageData = canvas.toDataURL('image/jpeg', 1.0);
      //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
      var pdf = new jsPDF('', 'pt', 'a4');
      //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
      pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28/canvas.width * canvas.height );
      pdf.save('medical-details.pdf');
    });
  }
  render() {
    return (
      <div id="canvas">
        <img src={Pig} alt ="img" style={{width:400,height:400}} />
        <p style={{fontSize:28,color:"purple"}}>img</p>
        <button onClick={() => this.download()}>Download Report</button>
      </div>
    );
  }
}
export default App;

四、html2canvas + jsPDF分页

问题：

• 图片跨域：

html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)
img标签增加 crossOrigin='anonymous'
图片服务器配置Access-Control-Allow-Origin 或使用代理

• svg不能显示

import React, { Component } from "react";
import "./App.css"
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
import Pig from "./pig.jpg"
import canvg from "canvg"
import $ from 'jquery'
class App extends Component {
  download() {
    if (typeof html2canvas !== 'undefined') {
      //以下是对svg的处理
      var nodesToRecover = [];
      var nodesToRemove = [];
      var svgElem = $("#canvas").find('svg');//divReport为需要截取成图片的dom的id
      svgElem.each(function (index, node) {
        var parentNode = node.parentNode;
        var svg = node.outerHTML.trim();
        var canvas = document.createElement('canvas');
        canvg(canvas, svg);
        if (node.style.position) {
          canvas.style.position += node.style.position;
          canvas.style.left += node.style.left;
          canvas.style.top += node.style.top;
        }
        nodesToRecover.push({
          parent: parentNode,
          child: node
        });
        parentNode.removeChild(node);
        nodesToRemove.push({
          parent: parentNode,
          child: canvas
        });
        parentNode.appendChild(canvas);
      });
      html2canvas((document.body),
        {
          useCORS: true,
          allowTaint: false,
          scale: 2
        })
        .then(function (canvas) {
          var pageData = canvas.toDataURL('image/jpeg', 1.0);
          //方向默认竖直，尺寸ponits，格式a4[595.28,841.89]
          var pdf = new jsPDF('', 'pt', 'a4');
          //addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩
          pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
          pdf.save('medical-details.pdf');
        });
    }
  }
  render() {
    return (
      <div id="canvas">
        <button onClick={() => this.download()}>Download Report</button>
        <svg
          width="100%"
          height="100%"
          id="svg_style"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 380 360"
        >
          <image xlinkHref={Pig} x="0" width="50%" height="50%" />
        </svg>
      </div>
    );
  }
}
export default App;

具体代码

html2canvas(document.body, {
      useCORS: true,
      // allowTaint: true,
      logging: false,
      scale: 2
    }).then(function(canvas) {
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = (contentWidth / 595.28) * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28;
      var imgHeight = (592.28 / contentWidth) * contentHeight;
      var pageData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF("", "pt", "a4");
      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save("medical-details.pdf");
});

• 分页的另外一种写法

download() {
    html2canvas(document.getElementById("userReportTable"), {
      useCORS: true,// 是否允许网页中img元素跨域，这个设置需要img元素支持及服务器支持
      allowTaint: true,// 支持跨域
      scale: 2// 这个影响生成图片的清晰度
    }).then(function(canvas) {
      var pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
      var ctx = canvas.getContext("2d"),
        a4w = 190,
        a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0;
      while (renderedHeight < canvas.height) {
        var page = document.createElement("canvas");
        page.width = canvas.width;
        page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              renderedHeight,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight)
            ),
            0,
            0
          );
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图像到页面，保留10mm边距

        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) {
          pdf.addPage();
        } //如果后面还有内容，添加一个空页
      }
      pdf.save("content.pdf");
    });

• 设置左右边距，如下图所示，设置左右边距20

• 解决多页截断问题

有没有大神有解决办法呀。求一个解决办法

• 完整代码，简单分页

import React, { Component } from "react";
import { Button, Icon, Table } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
class App extends Component {
  download() {
    html2canvas(document.getElementById("detail_report_dowload_container"), {
      useCORS: true,
      // allowTaint: true,
      logging: false,
      scale: 2
    }).then(function (canvas) {
      var contentWidth = canvas.width;
      var contentHeight = canvas.height;
      //一页pdf显示html页面生成的canvas高度;
      var pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的html页面高度
      var leftHeight = contentHeight;
      //页面偏移
      var position = 0;
      //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 555.28;
      var imgHeight = (555.28 / contentWidth) * contentHeight;
      var pageData = canvas.toDataURL("image/jpeg", 1.0);
      var pdf = new jsPDF("", "pt", "a4");
      //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      //当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, "JPEG", 20, 0, imgWidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          //避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage();
          }
        }
      }
      pdf.save("detail-report.pdf");
    });
  }
  render() {
    return (
      <div className="docReport-container">
        <Button className="dowButton" basic onClick={() => this.download()}>
          <Icon name="download" />
          Download Report
        </Button>
        <div id="detail_report_dowload_container">
          <Table celled className="report_table details_report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th_first">
                  app
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td_first">
                  123
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
          <Table celled className="report_table details_report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th_first">
                  study
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td_first">
                  qwe
                </Table.Cell>
              </Table.Row>
            </Table.Body>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th_first">
                  test
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td_first">
                  123
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
      </div>
    )
  }
}
export default App;

• 根据classname个数，下载成多个文件

import React, { Component } from "react";
import { Button, Icon, Table } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import jsPDF from "jspdf";
import "./App.css"
import html2canvas from "html2canvas";
class detailsReport extends Component {
  download() {
    // 要导出pdf的节点
    var elements = document.getElementsByClassName("report_table");
    for (var index = 0; index < elements.length; index++) {
      html2canvas(elements[index], {
        allowTaint: true, // 支持跨域
        useCORS: true, // 是否允许网页中img元素跨域，这个设置需要img元素支持及服务器支持
        scale: 2, // 这个影响生成图片的清晰度
        background: "#F5F5F5" //背景
      }).then(function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 555.28;
        var imgHeight = (555.28 / contentWidth) * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF("", "pt", "a4");
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          pdf.addImage(pageData, "JPEG", 20, 0, imgWidth, imgHeight);
        } else {
          while (leftHeight > 0) {
            pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }
        pdf.save("detail-report.pdf");
      });
    };
  }
  render() {
    return (
      <div className="docReport-container">
        <Button className="dowButton" basic onClick={() => this.download()}>
          <Icon name="download" />
          Download Report
        </Button>
        <div id="detail_report_dowload_container">
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  test
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_th">
                  ret
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  study
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  0
                </Table.Cell>
              </Table.Row>
            </Table.Body>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  row
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  123
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
      </div>
    )
  }
}
export default detailsReport;

• 根据classname个数，下载时分页

import React, { Component } from "react";
import { Button, Icon, Table } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageLength: 0
    };
  }
  /**
   * 导出为pdf
   * @param total 需要导出的总页数
   */
  download(total) {
    console.log("total",total)
    html2canvas(document.getElementById("detail_report_dowload_container"), {
      useCORS: true,
      logging: false
    }).then(function(canvas) {
      var pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
      var ctx = canvas.getContext("2d"),
        a4w = 190,
        a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        // imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        imgHeight = canvas.height / total + 0.001, //按A4显示比例换算一页图像的像素高度(+1是为了防止画布大小正好等于图片大小时溢出导致crash)
        renderedHeight = 0;
      console.log("imgHeight: ", imgHeight);
      console.log("canvasHeight: ", canvas.height);
      pdf.page=1;
      while (renderedHeight <= canvas.height) {
        var page = document.createElement("canvas");
        page.width = canvas.width;
        // page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
        page.height = canvas.height / total; //可能内容不足一页
        console.log("page.height: ", page.height);
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              ((renderedHeight / imgHeight) * canvas.height) / total,
              canvas.width,
              Math.min(imgHeight, canvas.height - renderedHeight)
            ),
            0,
            0
          );
          pdf.setFontSize(10);
          pdf.text(204,294, String(pdf.page)); //print number bottom right
          pdf.page++ ;
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height) 
        {
          pdf.addPage(); //如果后面还有内容，添加一个空页
          // delete page;
        }
      }
      pdf.save("detail-report.pdf");
    });
  }
  componentDidMount(){
    const length = document.getElementsByClassName("report_table").length
    this.setState({pageLength:length})
  }
  render() {
    return (
      <div className="docReport-container">
        <Button className="dowButton" basic onClick={() => this.download(this.state.pageLength)}>
          <Icon name="download" />
          Download Report
        </Button>
        <div id="detail_report_dowload_container">
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  app
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  123
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  study
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  qwe
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
      </div>
    )
  }
}
export default App;

• 限定某部分内容在前面几页

import React, { Component } from "react";
import { Button, Icon, Table } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageLength: 0
    };
  }
  /**
   * 导出为pdf
   * @param total 需要导出的总页数
   */
  download(total) {
    let reportHeight = 0;
    html2canvas(document.getElementById("userReportTable_report"), {
      useCORS: true,
      logging: false
    }).then(function(canvas) {
      reportHeight = canvas.height;
    });
    html2canvas(document.getElementById("userReportTable"), {
      useCORS: true,
      logging: false
    }).then(function(canvas) {
      var pdf = new jsPDF("p", "mm", "a4"); //A4纸，纵向
      var ctx = canvas.getContext("2d"),
        a4w = 190,
        a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        // imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
        imgHeight = (canvas.height - reportHeight) / total + 0.001, //按A4显示比例换算一页图像的像素高度(+1是为了防止画布大小正好等于图片大小时溢出导致crash)
        imgTableHeight = reportHeight + 0.001, //按A4显示比例换算一页图像的像素高度(+1是为了防止画布大小正好等于图片大小时溢出导致crash)
        renderedHeight = 0,
        renderTableHeight = 0;
      console.log("reportHeight", reportHeight);
      pdf.page = 1;
      while (renderTableHeight <= reportHeight) {
        // 这个-1时因为有时
        var page = document.createElement("canvas");
        page.width = canvas.width;
        page.height = Math.min(imgTableHeight, reportHeight - renderedHeight); // 可能内容不足一页

        // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              renderTableHeight,
              canvas.width,
              Math.min(imgTableHeight, reportHeight - renderTableHeight + 0.001)
            ),
            0,
            0
          );
        pdf.setFontSize(10);
        pdf.text(204, 294, String(pdf.page)); //print number bottom right
        pdf.page++;
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          10,
          10,
          a4w,
          (a4w * page.height) / page.width
        ); // 添加图像到页面
        // console.log(page.height, page.width, Math.min(a4h, a4w * page.height / page.width))

        renderTableHeight += imgTableHeight;
        if (renderTableHeight <= reportHeight) {
          pdf.addPage(); // 如果后面还有内容，添加一个空页
        }
      }
      pdf.addPage();
      while (renderedHeight <= canvas.height - reportHeight) {
        page = document.createElement("canvas");
        page.width = canvas.width;
        // page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页
        page.height = (canvas.height - reportHeight) / total; //可能内容不足一页
        console.log("page.height: ", page.height);
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        page
          .getContext("2d")
          .putImageData(
            ctx.getImageData(
              0,
              (((renderedHeight + reportHeight) / imgHeight) *
                (canvas.height - reportHeight)) /
                total,
              canvas.width,
              Math.min(imgHeight, canvas.height - reportHeight - renderedHeight)
            ),
            0,
            0
          );
        pdf.setFontSize(10);
        pdf.text(204, 294, String(pdf.page)); //print number bottom right
        pdf.page++;
        pdf.addImage(
          page.toDataURL("image/jpeg", 1.0),
          "JPEG",
          10,
          10,
          a4w,
          Math.min(a4h, (a4w * page.height) / page.width)
        ); //添加图像到页面，保留10mm边距
        renderedHeight += imgHeight;
        if (renderedHeight < canvas.height - reportHeight) pdf.addPage(); //如果后面还有内容，添加一个空页
        // delete page;
      }
      pdf.save("test.pdf");
    });
  }
  componentDidMount(){
    const length = document.getElementsByClassName("report_table").length
    this.setState({pageLength:length})
  }
  render() {
    return (
      <div className="docReport-container">
        <Button className="dowButton" basic onClick={() => this.download(this.state.pageLength)}>
          <Icon name="download" />
          Download Report
        </Button>
        <div id="userReportTable">
          <div id="userReportTable_report">
              <div className="user_report_title">
                <strong>Summary</strong>
              </div>
          </div>
        <div id="detail_report_dowload_container">
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  app
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  123
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="report_table_th">
                  study
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell className="report_table_td">
                  qwe
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
      </div>
      </div>
    )
  }
}
export default App;

• 目前还在考虑一个比较实用的方法，等待demo上传

https://www.zhangxinxu/wordpress/2017/07/js-text-string-download-as-html-json-file/

1.将当前页面内容转成pdf

2.然后下载

五、html-docx-js

参考网址：

https://github/evidenceprime/html-docx-js

http://evidenceprime.github.io/html-docx-js/test/sample.html

代码

import React, { Component } from "react";
import { Checkbox, Table, Button, Icon } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import htmlDocx from 'html-docx-js/dist/html-docx';
import {saveAs} from 'file-saver';
import imgTest from "./1.png"
class App extends Component {
  download() {
    this.convertImagesToBase64();
    var contentDocument = '<!DOCTYPE html>' + document.getElementById("docReport-container").outerHTML;
    var converted = htmlDocx.asBlob(contentDocument, {orientation: "Portrait"});
    saveAs(converted, 'study.docx');
  }
  convertImagesToBase64 () {
    var regularImages = document.querySelectorAll("img");
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    [].forEach.call(regularImages, function (imgElement) {
      // preparing canvas for drawing
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      canvas.width = imgElement.width;
      canvas.height = imgElement.height;
      ctx.drawImage(imgElement, 0, 0);
      // by default toDataURL() produces png image, but you can also export to jpeg
      // checkout function's documentation for more details
      var dataURL = canvas.toDataURL();
      imgElement.setAttribute('src', dataURL);
    })
    canvas.remove();
  }
  render() {
    return (
      <div id="docReport-container">
        <Button className="dowButton" basic onClick={() => this.download()}>
          <Icon name="download" />
          Download Report
        </Button>
        <div>
          <div className="report_table_box">
            <div className="user_report_title">
              <strong>Summary</strong>
            </div>
          </div>
          <Table celled className="report_table">
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell className="user_report_table_th_first">
                  Siren ID + Patient Initials
                </Table.HeaderCell>
                <Table.HeaderCell className="user_report_table_th">
                  Report
                </Table.HeaderCell>
                <Table.HeaderCell className="user_report_table_th user_report_table_th_last">
                  Bill?
                </Table.HeaderCell>
              </Table.Row>
            </Table.Header>
            <Table.Body>

              <Table.Row>
                <Table.Cell className="user_report_table_td_first">
                  1
                </Table.Cell>
                <Table.Cell className="user_report_table_td">
                  8/22019
                </Table.Cell>
                <Table.Cell className="user_report_table_td">
                  <Checkbox name="selectSite" />
                </Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
          <img src={imgTest} alt="no img"></img>
        </div>
      </div>
    );
  }
}
export default App;

• 检索不到外部css文件，同时并不是支持所有css 属性

解决html-docx-js不能引入外部css的问题。注意哦，尽量少用别人的样式组件，样式尽量自己写的简单css

注意：这个css文件需要另外粘贴一份到public文件夹内

download() {
    this.convertImagesToBase64();
    let getIndex = new Promise((resolve, reject) => {
      fetch('./App.css')
        .then(data => {
          data.text().then(css => {
            resolve(css);
          })
        }
        )
        .catch(error => reject(error));
    });
    getIndex
      .then(css => {
        let html =
          '<!DOCTYPE html><html><head lang="en"><style></style>' +
          '<meta charset="UTF-8"><title>Report</title><link rel="stylesheet" href="//cdn.jsdelivr/npm/semantic-ui@2.4.2/dist/semantic.min.css" /></head><body>' +
          document.getElementById("docReport-container").outerHTML +
          '</body></html>';

        html = juice.inlineContent(html, css);
        let docx = htmlDocx.asBlob(html);
        saveAs(docx, 'report.docx');
      })
      .catch(error => {
        console.log(error);
      });
    // var contentDocument = '<!DOCTYPE html>' + document.getElementById("docReport-container").outerHTML;
    // var converted = htmlDocx.asBlob(contentDocument, { orientation: "Portrait" });
    // saveAs(converted, 'study.docx');
  }

• 复选框和单选框不能打印出来

直接用图片代替即可

<img src={checkBlank} alt="error" className="checkbox_img" />

• 下载的表格出现背景颜色不填充满，线条没有紧密相连得问题

给table的css添加border-collapse: collapse;

在table元素上直接设置

cellPadding="0"

cellSpacing="0"

border="0"

那么表格的边框线会紧密相连。目前还没解决背景颜色不铺满的问题。有时间再来更新

 

六、wkhtmltopdf

缺点：wkhtmltopdf不支持动态页面或者react

优点参考：https://juejin.im/post/5b08bbb8f265da0dc562f046#heading-0