在 React 和 ASP.NET Core Web API 中使用 Syncfusion 生成和显示 PDF，包括响应式图像注释

Question

我正在开发一个项目，其中有一个或多个图像，并且我希望在单击这些图像上的坐标定义的特定区域时能够打开不同的表单。填写完表单后，我打算从后端收集表单数据并使用Syncfusion生成PDF文件。我的目标是在我的 React 应用程序中显示此 PDF。

但是，我在使用宽度属性使图像响应时遇到了问题，因为它似乎扭曲了我定义的坐标。如何应对这一挑战并正确管理响应式图像上的坐标？

此外，生成并保存 PDF 后，如何在我的 React 应用程序中显示它？当我使用返回文件发送 PDF 时，如何在 React 组件中处理和呈现生成的 PDF 文件的内容？

我非常感谢任何在这些方面有经验的人提供的指导或见解。谢谢！

function CmrForm() {
  const [selectedIdentifier, setSelectedIdentifier] = useState(null);
  const handleClick = (event) => {
    const identifier = event.target.getAttribute("data-identifier");
    setSelectedIdentifier(identifier);
    console.log("Identifier of the clicked area:", identifier);
  };

  const formLayout = {
    xlg: 6,
    xl: 9,
    lg: 9,
    md: 6,
    sm: 8,
    xs: 12,
  };

  return (
    <div className="padding-10">
      <div style={{ maxWidth: "65%", position: "relative" }}>
        <img
          src={cmr}
          style={{
            width: "100%",
            height: "auto", 
          }}
          useMap="#form"
        />

        <map onClick={handleClick}  name="form">
          <area shape="rect" coords="1025,10,1158,52" data-identifier="1" />
          <area shape="rect" coords="85,56,619,202" data-identifier="2" />
          <area shape="rect" coords="624,56,1163,202" data-identifier="3" />
          <area shape="rect" coords="86,204,621,352" data-identifier="4" />
          <area shape="rect" coords="621,204,1160,352" data-identifier="5" />
          <area shape="rect" coords="87,358,622,453" data-identifier="6" />
          <area shape="rect" coords="626,358,1161,453" data-identifier="7" />
          <area shape="rect" coords="86,458,624,551" data-identifier="8" />
          <area shape="rect" coords="85,555,623,653" data-identifier="9" />
          <area shape="rect" coords="624,455,1160,653" data-identifier="10" />
        </map>
      </div>
      <Col {...formLayout}>
        {selectedIdentifier && <Form1 identifier={selectedIdentifier} />}
      </Col>
    </div>
  );
}

export default CmrForm;

ASP.NET Core Web API 方法：

    [HttpPost]
    [Route("showCmr/{id}")]
    public async Task<IActionResult> ShowCmr(int id)
    {
        var item =  _repo.GetDocCmr(id);

        if (item != null)
        {
            var pdfUtil = new CmrPdf();
            var x = pdfUtil.RenderPdf(item, _repoUser.GetUserClientCache(User.Identity!.Name));
            return File(x, MediaTypeNames.Application.Pdf);
        }

        return CreateActionResult(CustomResponseDto<NoContentDto>.Fail(HttpStatusCode.NotFound, new ApiErrorModel { Error = XmlLangHtmlExtender.L("NotFoundException") }, -1));
    }

当我从 Postman 发出请求时，它会返回一个文件给我，但我无法在 React 部分中处理它。

Answer 1

我们为您创建了一个示例，以了解如何使用 PDF 查看器显示 PDF。这是一个简单的例子来向您展示它是如何工作的：

React 示例：您可以通过以下链接找到在 React 应用程序中如何工作的示例：React 示例。

Web 服务示例：您还可以单击此处查看 Web 服务示例：Web 服务示例。

在 PDF 查看器中查看生成的 PDF 的步骤：

1. 首先运行 Web 服务示例。

2. 之后，运行 React 示例。

3. 单击“获取 PDF 数据”按钮。这将向服务器发送请求。

4. 在服务器端，将生成 PDF，并将其作为内容类型为“application/pdf”的响应发回。

5. 然后使用 FileReader 工具将收到的“application/pdf”内容类型转换为 base64 字符串。

6. 此转换后的 Base64 字符串将加载到 PDF 查看器中。

有关如何使用表单字段、注释以及将图像添加到 PDF 的更多详细信息，您可以查看以下链接：

• 使用表单字段

• 使用注释

• 处理图像