微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用 Angular 将 HTML 文档转换为 PDF

如何解决使用 Angular 将 HTML 文档转换为 PDF

我有一个 Angular 11 应用程序,我想从给定的 HTML 下载 PDF。此 HTML 不是来自我的 Angular 应用程序的组件,而是独立于应用程序的 HTML 文档,如下所示:

<!DOCTYPE html>
<html lang='en' xmlns='ttp://www.w3.org/1999/xhtml'>
    <head>
        <style> p { color: red; } </style>
    </head>
    <body>
        <p>hi there</p>
    </body>
</html>



我希望能够加载此 HTML 并按原样另存为 PDF。我尝试使用 pdfmake 创建 PDF,但它忽略了 head 标签上的样式。

import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';

export class MyComponent {
    myHtml: string = "<!DOCTYPE html><html lang='en' 
xmlns='ttp://www.w3.org/1999/xhtml'><head><style> p { color: red; } 
</style></head><body><p>hi there</p></body></html>";

    constructor() {
        let html = htmlToPdfmake(this.myHtml);
        let documentDeFinition = { content: html };
        pdfMake.createPdf(documentDeFinition).open();
    }

}

PDF 生成

enter image description here

文字应该是红色的,为什么不是红色?

解决方法

你可以添加这样的内联样式

<!DOCTYPE html>
<html lang='en' xmlns='ttp://www.w3.org/1999/xhtml'>
    <head>
    </head>
    <body>
        <p style="color: red;">hi there</p>
    </body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。