是否可以在本机反应中从 json 数据创建 Html 内容？答案

【问题标题】：Is it possible to create Html content from json data in react native?是否可以在本机反应中从 json 数据创建 Html 内容？
【发布时间】：2022-01-01 00:15:32
【问题描述】：

我正在尝试在 react native 中从 json 数据创建一个 html 内容。基本上我想从我已经在我的 react native 应用程序中使用静态 html 内容完成的 html 内容生成 PDF，但是现在我们想要生成具有动态内容的 pdf 并决定数据在 json 中并将它们转换为 html 内容然后从 html 内容生成 pdf。

我们的 web 团队已经将 json 数据渲染到 dom 中，然后使用 react 从 dom 生成 pdf。

是否可以使用 react native 实现相同的效果。

【问题讨论】：

你能写出你的 JSON 数据吗？所以我可以看到 JSON 数据的格式
如果您在服务器端制作 pdf，您需要先在服务器上处理 json 和 react (js)，然后再将其输入 pdf maker。因此，您将需要类似 nextjs 或类似的东西来为 pdf 制作者提供预编译的 html 输入

标签： reactjs react-native dom html-to-pdf html-rendering

【解决方案1】：

您可以这样做 - （使用反引号而不是单引号或双引号）

const JsonData = {
   title: 'My PDF File',
   image: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/pdf.png'
}

const html = `
<html>
  <head>
     <meta charset="utf-8">
     <title>MyPDF</title>
     <style>${htmlStyles}</style>
  </head>
  <body>
    <h1>${JsonData.title}</h1>
    <img src=`${JsonData.image}` />
    {JsonData.otherData}
  </body>
</html>
`;

结帐示例： https://github.com/vishalpwr/react-native/tree/master/CreatePdf

【讨论】：