HtmlToCanvas作物svg [英] HtmlToCanvas crops svg

问题描述

在此处中尝试实现目标.我下载的pdf的唯一问题是右侧残酷地裁剪了图像:

Trying to achieve whats done here. Only problem my downloaded pdf has image croped brutally by right:

我深入研究并捕获html2canvas方法导致问题不是jspdf，

I dive into and catch html2canvas method cause the issue not jspdf,

那么我该如何使用html2canvas强制将svg正确地更改为png

So how can I force change svg to png properly using html2canvas

组件:

import PrintButton from "../../../components/print/print";

function QrcodeComponent(props) {
  return (
    <>
      <div id={"barcodeCont"}>
        <QRCode level="L" style={{ width: 256 }} value={JSON.stringify({})} />
      </div>
      <PrintButton id="barcodeCont" />
    </>
  );
}

PrintButton:

PrintButton:

import React from "react";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

const pxToMm = (px) => {
  return Math.floor(px / document.getElementById("myMm").offsetHeight);
};

const PrintButton = ({ id, label }) => (
  <div className="mt2">
    {/*
    Getting pixel height in milimeters:
    https://stackoverflow.com/questions/7650413/pixel-to-mm-equation/27111621#27111621
  */}
    <div id="myMm" style={{ height: "1mm" }} />

    <div
      onClick={() => {
        const input = document.getElementById(id);
        const inputHeightMm = pxToMm(input.offsetHeight);
        const a4WidthMm = 210;
        const a4HeightMm = 297;

        html2canvas(input).then((canvas) => {
          const imgData = canvas.toDataURL("image/png");//here: this image already cropped..
          let pdf = new jsPDF();
          // Document of a4WidthMm wide and inputHeightMm high
          if (inputHeightMm > a4HeightMm) {
            // elongated a4 (system print dialog will handle page breaks)
            pdf = new jsPDF("p", "mm", [inputHeightMm + 161, a4WidthMm]);
          } else {
            // standard a4
            pdf = new jsPDF();
          }
          pdf.addImage(imgData, "PNG", 0, 0);
          pdf.save(`${id}.pdf`);
        });
      }}
    >
      <button type="button" className="btn btn-lime">
        <i className="fa fa-download"></i> Download{" "}
      </button>
    </div>
  </div>
);

export default PrintButton;

推荐答案

每次使用React时，都需要使用可直接使用refs操纵dom外观的libs ...(有点像react与document.getElementById等效)-它为您提供了dom节点的引用...您可以执行以下操作:

Any time you're using React and you need to use libs that directly manipulate the dom look into using refs... (it's sort of the react equivalent of document.getElementById) - it gives you a reference to the dom node... You can do something like this:

import React, { useRef } from "react";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
import "./style.css";

export default function App() {
  const captureRef = useRef(null);

  const getScreenshot = async () => {
    const canvas = await html2canvas(captureRef.current);
    const img = canvas.toDataURL("image/png");
    
    const doc = new jsPDF();
    doc.addImage(img, 10, 10);
    doc.save("a4.pdf");
  };

  return (
    <div className="wrapper">
      <div ref={captureRef} className="to-capture">
        <p>
          This enitre <code>div</code> will be captured
        </p>
      </div>
      <button onClick={getScreenshot}>Get Screenshot!</button>
    </div>
  );
}

实时演示: https://stackblitz.com/edit/react-w5qb9a?file = src％2FApp.js

有关裁判的更多信息: https://reactjs.org/docs/refs-and-the-dom.html

More info on refs: https://reactjs.org/docs/refs-and-the-dom.html

这篇关于HtmlToCanvas作物svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！