react实现下载

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

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

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

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

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");
});

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

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

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

2.然后下载

猜你喜欢