Блог

Главная - Вопросы по программированию - преобразование dvi в pdf без отображения его на веб — странице в ReactJS

преобразование dvi в pdf без отображения его на веб — странице в ReactJS

#javascript #reactjs

Вопрос:

это функция jsPDF для создания PDF-файла.Проблема в том, что div, который я хочу преобразовать в pdf, не должен отображаться на веб-странице.Если я использую «скрытый» в div, он отобразит пустой pdf-файл

  function generatePDF(){
        var rep = new jsPDF("p","pt","a4")
        rep.html(document.querySelector("#rep1"),{
            callback: function(pdf){
                pdf.save("report.pdf");   
            }
        })
    }

это div, который я хочу преобразовать в PDF.

 <div id="rep1">content<div>

Комментарии:

1. Если у вас в DOM есть вещи, которые не должны быть видны, просто установите для них CSS корневого элемента (или CSS оберточного элемента) значение display: none ?

2. тогда pdf также будет пустым

Ответ №1:

Вы можете сделать это так, например, когда вы нажимаете на кнопку, вы можете показать блок и скрыть его после печати

 import React, { useState } from "react";
import { jsPDF } from "jspdf";

export default function App() {
  const [display, setDisplay] = useState("none");

  const generatePDF = () => {
    setDisplay("block");
    var rep = new jsPDF("p", "pt", "a4");
    rep.html(document.querySelector("#rep1"), {
      callback: function (pdf) {
        pdf.save("report.pdf");
        setDisplay("none");
      }
    });
  };

  return (
    <div className="App">
      <div id="rep1" style={{ display }}>
        Hello CodeSandbox
      </div>
      <button onClick={generatePDF}>Click</button>
    </div>
  );
}

Codesandbox: https://codesandbox.io/s/pensive-worker-l32io?file=/src/App.js

Просмотр кода: https://l32io.csb.app/

Комментарии:

1. Извини, но я не могу позволить этому проявиться хотя бы один раз

2. Хорошо, сделайте родителя скрытым, и вы, дети, покажетесь, пожалуйста, проверьте обновленное поле codesadn

Метки: