React 구성 요소에서 PDF 파일 생성

React 구성 요소에서 PDF 파일 생성

저는 투표 애플리케이션을 만들고 있습니다.사람들은 그들의 여론조사를 만들고 그들이 묻는 질문에 대한 데이터를 얻을 수 있다.PDF 형식으로 결과를 다운로드 할 수 있는 기능을 추가하고 싶습니다.

예를 들어 질문과 데이터를 파악하는 두 가지 구성 요소가 있습니다.

<QuestionBox />
<ViewCharts />

두 컴포넌트를 PDF 파일로 출력하려고 합니다.사용자는 이 PFD 파일을 다운로드할 수 있습니다.컴포넌트 내에서 PDF를 렌더링할 수 있는 패키지를 몇 개 찾았습니다.그러나 가상 DOM으로 구성된 입력 스트림에서 PDF를 생성할 수 있는 것을 찾지 못했습니다.처음부터 이 목표를 달성하려면 어떤 접근방식을 따라야 합니까?

일반적으로 pdf로 렌더링하는 것은 번거로운 일이지만 캔버스를 사용하는 방법도 있습니다.

HTML -> Canvas -> PNG (또는 JPEG) -> PDF로 변환합니다.

상기의 목적을 달성하려면 , 다음의 것이 필요합니다.

1. html2param &
2. jsPDF

import React, {Component, PropTypes} from 'react';

// download html2canvas and jsPDF and save the files in app/ext, or somewhere else
// the built versions are directly consumable
// import {html2canvas, jsPDF} from 'app/ext';


export default class Export extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
      .then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0);
        // pdf.output('dataurlnewwindow');
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
      <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      <div id="divToPrint" className="mt4" {...css({
        backgroundColor: '#f5f5f5',
        width: '210mm',
        minHeight: '297mm',
        marginLeft: 'auto',
        marginRight: 'auto'
      })}>
        <div>Note: Here the dimensions of div are same as A4</div> 
        <div>You Can add any component here</div>
      </div>
    </div>);
  }
}

필요한 파일을 가져오지 않았기 때문에 여기서는 스니펫이 작동하지 않습니다.

이 답변에서는 중간 단계를 생략하고 HTML에서 PDF로 간단하게 변환할 수 있는 대체 방법을 사용하고 있습니다.jsPDF 문서에서도 이 옵션을 사용할 수 있지만, 직접 관찰한 결과 dom을 png로 먼저 변환하면 정확도가 향상되는 것 같습니다.

업데이트 0: 2018년 9월 14일

이 방법으로 작성된 pdfs의 텍스트는 선택할 수 없습니다.이것이 필수 조건이라면 이 문서가 도움이 될 수 있습니다.

React-PDF는 이를 위한 훌륭한 리소스입니다.

마크업과 CSS를 React-PDF 형식으로 변환하는 것은 다소 시간이 걸리지만 이해하기 쉽습니다.PDF 를 export 하는 것은 매우 간단합니다.

react-PDF에 의해 생성된 PDF를 사용자가 다운로드할 수 있도록 하려면 사용자 정의 가능한 다운로드 링크를 제공하는 온 더 플라이 렌더링을 사용하십시오.클릭하면, 유저의 PDF 를 렌더링 해 다운로드합니다.

필요한 마크업과 스타일링을 알기 쉽게 하기 위한 리플리케이션입니다.PDF용 다운로드 링크도 있습니다만, 여기에 그 코드가 표시되어 있지 않습니다.

jsPDF를 사용하여 캔버스를 사용할 수 있습니다.

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

 _exportPdf = () => {

     html2canvas(document.querySelector("#capture")).then(canvas => {
        document.body.appendChild(canvas);  // if you want see your screenshot in body.
        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF();
        pdf.addImage(imgData, 'PNG', 0, 0);
        pdf.save("download.pdf"); 
    });

 }

ID 캡쳐를 사용하는 div는 다음과 같습니다.

예

<div id="capture">
  <p>Hello in my life</p>
  <span>How can hellp you</span>
</div>

몇 단계만 하면 됩니다.HTML 페이지에서 PDF를 다운로드 또는 생성하거나 HTML 페이지에서 특정 div의 PDF를 생성할 수 있습니다.

순서 : HTML -> 이미지 (PNG 또는 JPEG) -> PDF

아래 단계를 따르십시오.

순서 1:-

npm install --save html-to-image
npm install jspdf --save

순서 2:-

/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
 
/* ES5 */
var htmlToImage = require('html-to-image');

-------------------------
import { jsPDF } from "jspdf";

순서 3:-

   ******  With out PDF properties given below  ******

 htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 })
        .then(function (dataUrl) {
          var link = document.createElement('a');
          link.download = 'my-image-name.jpeg';
          const pdf = new jsPDF();          
          pdf.addImage(dataUrl, 'PNG', 0, 0);
          pdf.save("download.pdf"); 
        });


    ******  With PDF properties given below ******

    htmlToImage.toPng(document.getElementById('myPage'), { quality: 0.95 })
        .then(function (dataUrl) {
          var link = document.createElement('a');
          link.download = 'my-image-name.jpeg';
          const pdf = new jsPDF();
          const imgProps= pdf.getImageProperties(dataUrl);
          const pdfWidth = pdf.internal.pageSize.getWidth();
          const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
          pdf.addImage(dataUrl, 'PNG', 0, 0,pdfWidth, pdfHeight);
          pdf.save("download.pdf"); 
        });

이게 도움이 될 것 같아요.시도해 보세요

ReactDOMServer를 사용하여 구성 요소를 HTML로 렌더링한 후 jsPDF에서 사용할 수 있습니다.

먼저 Import를 수행합니다.

import React from "react";
import ReactDOMServer from "react-dom/server";
import jsPDF from 'jspdf';

그 후, 다음과 같이 합니다.

var doc = new jsPDF();
doc.fromHTML(ReactDOMServer.renderToStaticMarkup(this.render()));
doc.save("myDocument.pdf");

사용하는 방법:

renderToStaticMarkup

다음 대신:

renderToString

전자에는 반응하는 HTML 코드가 포함되어 있습니다.

my opinion : 

import { useRef } from "react";
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";

import "./styles.css";

const App = () => {
  const inputRef = useRef(null);
  const printDocument = () => {
    html2canvas(inputRef.current).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF();
      pdf.addImage(imgData, "JPEG", 0, 0);
      pdf.save("download.pdf");
    });
  };
  return (
    <>
      <div className="App">
        <div className="mb5">
          <button onClick={printDocument}>Print</button>
        </div>
        <div id="divToPrint" ref={inputRef}>
          <div>Note: Here the dimensions of div are same as A4</div>
          <div>You Can add any component here</div>
        </div>
      </div>
    </>
  );
};
export default App;

link demo:

https://codesandbox.io/s/frosty-sea-44b4q?file=/src/App.js:0-907

「 」를 하는 것 에, 「 」를 하는 것도 가능합니다.html2canvas ★★★★★★★★★★★★★★★★★」jspdf 도서관, , , , 도서관, 도서관이다.react-to-printReact 컴포넌트를 PDF 파일로 다운로드하려면 https://www.npmjs.com/package/react-to-print 를 참조하십시오.설명서, 예제 및 데모는 훌륭합니다.클래스 베이스의 컴포넌트 및 기능 베이스의 컴포넌트 유저를 위한 메뉴얼도 준비되어 있습니다.

다음은 기능 기반 컴포넌트의 사용 예를 제시하겠습니다.

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

import { ComponentToPrint } from './ComponentToPrint';

const Example = () => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

  return (
    <div>
      <ComponentToPrint ref={componentRef} />
      <button onClick={handlePrint}>Print this out!</button>
    </div>
  );
};

이것은 차선책일 수도 있고 아닐 수도 있지만, 제가 발견한 멀티 페이지 문제에 대한 가장 간단한 해결책은 jsPDFObj.save 메서드를 호출하기 전에 모든 렌더링이 완료되었는지 확인하는 것이었습니다.

기사를 치환과 주지 특히 및 할 때 할 수 . 이것은 css 이미지 텍스트 치환과 유사한 수정으로 해결됩니다. 저는 렌더링되는 요소를 페이지 왼쪽에 배치합니다. 이것은 레이아웃에 영향을 주지 않고 특히 탭, 아코디언 및 기타 UI 컴포넌트를 사용할 때 elem을 html2pdf에 표시할 수 있습니다.{display: none}.

하고 '예약'을 호출합니다.pdf.save() finally()이게 실수인지 안티 패턴인지 확신할 수 없지만, 제가 던져본 대부분의 경우 효과가 있는 것 같습니다.

// Get List of paged elements.
let elems = document.querySelectorAll('.elemClass');
let pdf = new jsPDF("portrait", "mm", "a4");

// Fix Graphics Output by scaling PDF and html2canvas output to 2
pdf.scaleFactor = 2;

// Create a new promise with the loop body
let addPages = new Promise((resolve,reject)=>{
  elems.forEach((elem, idx) => {
    // Scaling fix set scale to 2
    html2canvas(elem, {scale: "2"})
      .then(canvas =>{
        if(idx < elems.length - 1){
          pdf.addImage(canvas.toDataURL("image/png"), 0, 0, 210, 297);
          pdf.addPage();
        } else {
          pdf.addImage(canvas.toDataURL("image/png"), 0, 0, 210, 297);
          console.log("Reached last page, completing");
        }
  })
  
  setTimeout(resolve, 100, "Timeout adding page #" + idx);
})

addPages.finally(()=>{
   console.log("Saving PDF");
   pdf.save();
});

npm install jspdf --save

//반응 시 코드

import jsPDF from 'jspdf';


var doc = new jsPDF()


 doc.fromHTML("<div>JOmin</div>", 1, 1)


onclick //

 doc.save("name.pdf")

JSPDF와 html-to-image를 사용했습니다.

아래 git repo에서 코드를 확인하실 수 있습니다.

링크

마음에 들면, 별을 떨어뜨려도 좋아✌★

또한 HTML에서 PDF를 생성하는 "React on the fly pdf"를 시도할 수 있습니다. 이 플러그인은 html2canvas와 후드의 jspdf를 사용하여 PDF 문서를 생성합니다.이 플러그인은 여러 페이지, 머리글 및 바닥글을 지원합니다."진짜" pdf가 생성되지 않음을 경고합니다.즉, 실제 pdf는 벡터여야 합니다.실제 pdf를 생성할 수 있는 Javascript 플러그인이 생각나지 않습니다.그러려면 다른 도구를 사용해야 합니다.

라이브러리 react-pdf-printer를 사용할 수 있습니다.

이 라이브러리는 예를 들어 웹 사이트를 여러 페이지로 분할할 수 있는 위치를 가리키거나 페이지 번호를 사용하여 사용자 지정 머리글과 바닥글을 설정하는 등의 제어 기능을 제공합니다.

다른 사람이 되는 데 도움이 됐으면 좋겠어요.

ReactPDF를 사용할 수 있습니다.

div를 PDF로 쉽게 변환할 수 있습니다.ReactPDF 마크업을 사용하려면 기존 마크업을 일치시켜야 하지만 그럴 가치가 있습니다.

언급URL : https://stackoverflow.com/questions/44989119/generating-a-pdf-file-from-react-components