C#结合html2canvas切割图片并导出到PDF

在C#中结合 html2canvas 切割图片并导出到 PDF，通常需要在前端使用 JavaScript 库（如 html2canvas 和 jsPDF）来完成图片的捕获和 PDF 生成，然后将生成的 PDF 文件发送到后端（C#）进行处理或保存。以下是实现步骤：

1. 前端部分：使用 `html2canvas` 和 `jsPDF`

在前端，使用 html2canvas 将 HTML 内容渲染为图片，然后使用 jsPDF 将图片导出为 PDF。

引入必要的库

在 HTML 文件中引入 html2canvas 和 jsPDF：


<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

编写 JavaScript 代码

以下是一个示例代码，将 HTML 内容转换为图片并导出为 PDF：


<div id="content-to-export">
    <h1>Hello, World!</h1>
    <p>This is a sample content to be exported to PDF.</p>
</div>
<button id="export-btn">Export to PDF</button>
<script>
    document.getElementById('export-btn').addEventListener('click', function () {
        const element = document.getElementById('content-to-export');
        // 使用 html2canvas 将 HTML 内容渲染为图片
        html2canvas(element).then(canvas => {
            const imgData = canvas.toDataURL('image/png'); // 获取图片的 Base64 数据
            const pdf = new jspdf.jsPDF(); // 创建 PDF 对象
            // 将图片添加到 PDF 中
            const imgWidth = 210; // A4 纸的宽度（单位：mm）
            const imgHeight = (canvas.height * imgWidth) / canvas.width; // 按比例计算高度
            pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
            // 保存 PDF 文件
            pdf.save('exported-file.pdf');
            // 如果需要将 PDF 发送到后端，可以将 PDF 转换为 Blob 并上传
            const pdfBlob = pdf.output('blob');
            uploadToServer(pdfBlob);
        });
    });
    function uploadToServer(blob) {
        const formData = new FormData();
        formData.append('file', blob, 'exported-file.pdf');
        // 使用 Fetch API 将文件发送到后端
        fetch('/UploadPDF', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                alert('File uploaded successfully!');
            } else {
                alert('File upload failed.');
            }
        });
    }
</script>
<div id="content-to-export">
    <h1>Hello, World!</h1>
    <p>This is a sample content to be exported to PDF.</p>
</div>
<button id="export-btn">Export to PDF</button>

<script>
    document.getElementById('export-btn').addEventListener('click', function () {
        const element = document.getElementById('content-to-export');

        // 使用 html2canvas 将 HTML 内容渲染为图片
        html2canvas(element).then(canvas => {
            const imgData = canvas.toDataURL('image/png'); // 获取图片的 Base64 数据
            const pdf = new jspdf.jsPDF(); // 创建 PDF 对象

            // 将图片添加到 PDF 中
            const imgWidth = 210; // A4 纸的宽度（单位：mm）
            const imgHeight = (canvas.height * imgWidth) / canvas.width; // 按比例计算高度
            pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);

            // 保存 PDF 文件
            pdf.save('exported-file.pdf');

            // 如果需要将 PDF 发送到后端，可以将 PDF 转换为 Blob 并上传
            const pdfBlob = pdf.output('blob');
            uploadToServer(pdfBlob);
        });
    });

    function uploadToServer(blob) {
        const formData = new FormData();
        formData.append('file', blob, 'exported-file.pdf');

        // 使用 Fetch API 将文件发送到后端
        fetch('/UploadPDF', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                alert('File uploaded successfully!');
            } else {
                alert('File upload failed.');
            }
        });
    }
</script>
<div id="content-to-export">
    <h1>Hello, World!</h1>
    <p>This is a sample content to be exported to PDF.</p>
</div>
<button id="export-btn">Export to PDF</button>

<script>
    document.getElementById('export-btn').addEventListener('click', function () {
        const element = document.getElementById('content-to-export');

        // 使用 html2canvas 将 HTML 内容渲染为图片
        html2canvas(element).then(canvas => {
            const imgData = canvas.toDataURL('image/png'); // 获取图片的 Base64 数据
            const pdf = new jspdf.jsPDF(); // 创建 PDF 对象

            // 将图片添加到 PDF 中
            const imgWidth = 210; // A4 纸的宽度（单位：mm）
            const imgHeight = (canvas.height * imgWidth) / canvas.width; // 按比例计算高度
            pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);

            // 保存 PDF 文件
            pdf.save('exported-file.pdf');

            // 如果需要将 PDF 发送到后端，可以将 PDF 转换为 Blob 并上传
            const pdfBlob = pdf.output('blob');
            uploadToServer(pdfBlob);
        });
    });

    function uploadToServer(blob) {
        const formData = new FormData();
        formData.append('file', blob, 'exported-file.pdf');

        // 使用 Fetch API 将文件发送到后端
        fetch('/UploadPDF', {
            method: 'POST',
            body: formData
        }).then(response => {
            if (response.ok) {
                alert('File uploaded successfully!');
            } else {
                alert('File upload failed.');
            }
        });
    }
</script>

2. 后端部分：C# 接收并保存 PDF 文件

在后端，使用 C# 接收前端上传的 PDF 文件并保存到服务器。

创建 API 接口

在 ASP.NET Core 中创建一个 API 接口来接收文件：


using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;
[ApiController]
[Route("api/[controller]")]
public class UploadPDFController : ControllerBase
{
    [HttpPost]
    public IActionResult UploadPDF(IFormFile file)
    {
        if (file == null || file.Length == 0)
        {
            return BadRequest("No file uploaded.");
        }
        // 保存文件到服务器
        var filePath = Path.Combine("wwwroot/uploads", file.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        return Ok(new { message = "File uploaded successfully!", filePath });
    }
}
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;

[ApiController]
[Route("api/[controller]")]
public class UploadPDFController : ControllerBase
{
    [HttpPost]
    public IActionResult UploadPDF(IFormFile file)
    {
        if (file == null || file.Length == 0)
        {
            return BadRequest("No file uploaded.");
        }

        // 保存文件到服务器
        var filePath = Path.Combine("wwwroot/uploads", file.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }

        return Ok(new { message = "File uploaded successfully!", filePath });
    }
}
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.IO;

[ApiController]
[Route("api/[controller]")]
public class UploadPDFController : ControllerBase
{
    [HttpPost]
    public IActionResult UploadPDF(IFormFile file)
    {
        if (file == null || file.Length == 0)
        {
            return BadRequest("No file uploaded.");
        }

        // 保存文件到服务器
        var filePath = Path.Combine("wwwroot/uploads", file.FileName);
        using (var stream = new FileStream(filePath, FileMode.Create))
        {
            file.CopyTo(stream);
        }

        return Ok(new { message = "File uploaded successfully!", filePath });
    }
}

配置静态文件访问

在 Startup.cs 中配置静态文件访问，以便可以通过 URL 访问上传的文件：


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseStaticFiles(); // 启用静态文件访问
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles(); // 启用静态文件访问
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseStaticFiles(); // 启用静态文件访问
    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}