使用 Blazor C# 创建可下载的 PDF 文件

Question

我正在 Visual Studio 中的 .NET 6.0 上使用 Blazor C# 进行开发，我需要创建一个用户可以下载的 PDF 文件。 该文件需要包含 .tff 文件中的图像、希伯来语字符和标点符号，来自链接here。

我尝试通过服务器上的 iTextSharp 库创建文件，但服务器无法编码新字体以供使用，并且默认字体无法显示希伯来语文本。

然后我尝试在客户端以相同的方式创建文件，因为它可以嵌入字体，但当然 iTextSharp 库只能在服务器端使用，就像类似的 .NET 库一样。

我的下一个方法是创建一个包含图像和希伯来语文本的 Blazor 组件，并使用某种 HTML 到 PDF 的转换，但我找不到执行此转换的库，而且我也无法支付费用外部 API。

Answer 1

您可以尝试两种选择，都在前端渲染 PDF：

1. 尝试在 iframe 元素中将文档呈现为 html 并使用嵌入式浏览器“打印”对话框，用户可以在其中选择“保存到 PDF”选项 或
2. 在 iframe 中将文档渲染为 html（您可以创建具有所需样式的文档 html 模板，然后使用 Handlebars.Net 填充数据），然后使用 dom-to-image 将 iframe.body 转换为 png，然后将 png 转换使用 jsPdf
转换为 pdf

JS 代码草案：

function generatePdf(htmls) {
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
    var doc = new jsPDF('p', 'mm');
    
    var first = true;

    const render = html =>
        new Promise(resolve => {
            iframedoc.body.innerHTML = html;
            if (iframedoc.body.scrollHeight > 1100) {
                iframedoc.querySelector('body').classList.add('body2c')
            } else if (iframedoc.body.scrollHeight > 2200) {
                iframedoc.querySelector('body').classList.add('body3c')
            }
            domtoimage.toPng(iframedoc.body)
                .then(function (dataUrl) {
                    var img = new Image();
                    img.src = dataUrl;
                    if (!first) {
                        doc.addPage();
                    }
                    first = false;
                    doc.addImage(dataUrl, 'PNG', 5, 5);
                    resolve(html);
                }).catch(function (error) {
                    console.error('oops, something went wrong!', error);
                });
        });
    const postrender = async () => {
        for (html of htmls) {
            await render(html);
        }
        if (htmls.isdownload == true) {
            doc.save(htmls.filename ? htmls.filename : "pdfname.pdf");
        } else {
            doc.autoPrint();
            window.open(doc.output('bloburl'), '_blank', "toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes,top=200,left=350,width=800,height=600");
        }
        document.body.removeChild(iframe);
    };
    postrender();

}

从 c# 调用：

string[] htmlDocs = ...
await JSRuntime.InvokeVoidAsync("generatePdf", new { Htmls = htmlDocs, isdownload = true, filename = fileName });

Answer 2

谢谢大家。我最终创建了一个新的 Blazor 组件作为 HTML 页面，并添加了一个运行 JavaScript 函数“window.print()”的按钮，因为用户可以选择这种方式“打印到 PDF”。