需要在React Js中下载对象数组作为pdf报告,其中包含超链接

问题描述 投票:0回答:1
let data = [{
  profile1: <a href="facebook.com">facebook</a>,
  name: 'Name',
  profile2: <a href="google.com">google</a>,
  age: 23,
  country: 'ABc'
}]

需要以带有超链接的 pdf 报告形式查看上述数据。我也尝试使用 jspdf、jsautotable 和 react-pdf 包,但没有成功。

javascript reactjs jspdf
1个回答
0
投票

试试这个。去阅读文档,看看它是如何工作的。

安装:

npm install pdfmake
或 TypeScript
npm i --save-dev @types/pdfmake

import React from "react";
import pdfMake from "pdfmake/build/pdfmake";
import pdfFonts from "pdfmake/build/vfs_fonts";

pdfMake.vfs = pdfFonts.pdfMake.vfs;

const generatePDF = () => {
  const documentDefinition = {
    content: [
      { text: "Profile 1: facebook", link: "https://www.facebook.com" },
      { text: "Name: Name" },
      { text: "Profile 2: google", link: "https://www.google.com" },
      { text: "Age: 23" },
      { text: "Country: ABC" },
    ],
  };

  const pdfDoc = pdfMake.createPdf(documentDefinition);
  pdfDoc.download("report.pdf");
};

const PdfReport: React.FC = () => {
  return (
    <div>
      <button onClick={generatePDF}>Generate PDF</button>
    </div>
  );
};

export default PdfReport;
© www.soinside.com 2019 - 2024. All rights reserved.