Angular 使用css将html转换为pdf

我需要用css将html转换为pdf，我使用了windows.print，但它不包括css样式我通过做两件事解决了这个问题：

添加缩小css： 您可以使用此网站缩小css

我通过添加基本url解决了图像问题：

---

首先，您需要在angular应用程序中安装一些软件包。因此，打开终端并执行以下命令：

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

在视图文件上添加代码，例如：

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example</h2>
               
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sam</td>
          <td>Sam</td>
          <td>tutsmake.com</td>
        </tr>
        <tr>
          <td>john</td>
          <td>dam</td>
          <td>w3school.com</td>
        </tr>
        <tr>
          <td>jonhy</td>
          <td>hid</td>
          <td>geeks.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

import { Component, ViewChild, ElementRef } from '@angular/core';
   
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmlToPDF';
   
  @ViewChild('pdfTable') pdfTable: ElementRef;
   
  public downloadAsPDF() {
    const doc = new jsPDF();
    
    const pdfTable = this.pdfTable.nativeElement;
    
    var html = htmlToPdfmake(pdfTable.innerHTML);
      
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
      
  }
}

---

最后，测试您的应用程序。

您正在尝试链接一个scss文件，而不是已编译的css。浏览器无法理解它。我建议直接手动添加样式或链接已编译的css。对于图片：您将与谁共享您的HTML代码？不确定它是否处理文件位置，可能使用图像的绝对路径来解决它。此库不适用于大型文档，我的文档包含超过50页。谢谢您在这种情况下，您可以使用Crystal Reports或Stimul Reports，这些第三方将有助于大数据。亲爱的，欢迎您，祝您好运。如果你没有找到解决办法，请告诉我，我会帮助你的。