Pdf 导出方案探讨

[ArgoZhang]

目前 Table 组件导出按钮增加了 Pdf 导出 内置了一个接口来实现，本来是准备使用 html2pdf JavaScript 库来实现，经过测试遇到 Blazor 生成的 <!----> 就空文档

本来设想，给定 table id 即可通过 js 获得当前页所有数据的 html 源码通过 html2pdf 直接导出

经过测试发现，可能是 html2pdf 版本问题，不同的版本导出的结果还不一样

网上找了一些目前比较理想的是

https://www.c-sharpcorner.com/article/how-to-create-pdf-using-itextsharp-in-blazor/

后续找到可以跟帖

需求：找到一个能接受的可行性方案

[ArgoZhang]

@densen2014

[ArgoZhang]

导出 Excel 后再导出 Pdf （通过导出 Excel 组件来间接实现导出 Pdf）是否可行呢？

[densen2014]

当导出内容中包含 ≶!--!--> 等字符时，会出现导出文件是空白问题，还未找到解决办法 上次的正则去哪儿了,我找不到了

[densen2014]

测试代码

https://github.com/dotnetcore/BootstrapBlazor/tree/alex_pdf_test?WT.mc_id=DT-MVP-5005078

已知问题: 中文不能渲染

    private async Task OnExportStream()
    {
        var html = "<!--!--><div style=\"padding: 1rem;\"><!--!--><h2>标题Title </h2><div>this is 示例模板</div><!--!--><!--!--><!--!--></div>";

        using var stream = await PdfService.ExportStreamAsync(html);
        await DownloadService.DownloadFromStreamAsync("test-stream.pdf", stream);
        await ToastService.Success("Pdf Export", "Export pdf stream success.");
    }




public async Task<bool> ExportAsync(string html, string? fileName = null)
    {
        var sr = new StringReader(html);
        var doc = new Document(PageSize.A4, 10f, 10f, 100f, 0f);
        var htmlparser = new HTMLWorker(doc);
        using var ms = new MemoryStream();
        var writer = PdfWriter.GetInstance(doc, new FileStream(fileName, FileMode.Create));
        doc.Open();
        htmlparser.Parse(sr);
        doc.Close();
        return true;
    } 

    public async Task<Stream> ExportStreamAsync(string html)
    {
        var sr = new StringReader(html);
        var doc = new Document(PageSize.A4, 10f, 10f, 100f, 0f);
        var htmlparser = new HTMLWorker(doc);
        using var ms = new MemoryStream() ;
        var writer =    PdfWriter.GetInstance(doc, ms);
        doc.Open();
        htmlparser.Parse(sr);
        doc.Close();
        var bytes = ms.ToArray();
        ms.Close();
        return new MemoryStream(bytes);
    }

[ArgoZhang]

@densen2014 这个组件不灵，还得继续找找，或者研究一下 html2pdf

[ArgoZhang]

@densen2014 我又来啦

https://juejin.cn/post/7138370283739545613

这个不错

[ArgoZhang]

https://gitee.com/liuloser/output_pdf_demo/tree/master

[ArgoZhang]

pdf 就是毒瘤啊。基本无解

[shps951023]

公司都是在 server 架设 OpenOffice 来处理转换

[ArgoZhang]

我是开源组件，不能这么搞，尤其是 wasm 模式没有后端

[dingyaox]

是否可以尝试一下这个组件 https://github.com/itext/i7n-pdfhtml ，也是itext团队开发的。只是开源协议是agpl。我们在项目中效果最好的还是收费的像Asposed，Spire等一些收费的软件，开源的pdfhtml 要比html2pdf 好一些。

[ArgoZhang]

太感谢了。我研究一下，写代码试试看

[ArgoZhang]

导成图片能解决很多问题。但是会带来一个致命问题，就是网页中原来的下载附件等功能。图片就不行了。熊掌跟鱼肉不能兼得

[dingyaox]

这个确实是，没有办法，开源的确实很难找到很好的解决方案，收费的倒是有很多，这部分属于关键技术了。

[dingyaox]

还有浏览器打印局部的功能，js应该是可以实现的，或者把弹一个模态窗口把要打印的内容放进去，这样应该是可以实现比较完美的生成pdf的效果，但是交互就有点不是太合适，这块我没太深入的研究，也是一个方向

[ArgoZhang]

主要是咱们是开源组件库，不是框架，无法得知那个局部需要打印，会给使用者带来额外的麻烦跟代码量。我是想从组件的粒度去解决问题。所以目前一直没找到好办法。比如打印弹窗为 pdf 需要 css 来配合把其余的都藏起来。所以打印这个路子很难走。还是想把 html to pdf

[ArgoZhang]

https://github.com/hardkoded/puppeteer-sharp

目前感觉这个是最好的

[ArgoZhang]

PDF 导出方案已经解决

https://space.bilibili.com/660853738/search/video?keyword=pdf