打印和下载 excel 在泳道/ngx-datatable 中不起作用答案

【问题标题】：Print and download exel are not working in swimlane/ngx-datatable打印和下载 excel 在泳道/ngx-datatable 中不起作用
【发布时间】：2021-07-27 04:03:30
【问题描述】：

尝试为 ngx-datatable 设置打印和下载选项，但它不起作用。打印表格 css 也不起作用。我不知道如何解决这个问题。如果有人知道，请帮助找到解决方案。

demo.component.ts:

  printData(){

   var printContents = document.getElementById("myTable").innerHTML; 
   var WindowObject = window.open('', "PrintWindow", "width=700,height=850,top=200,left=200,toolbars=no,scrollbars=no,status=no,resizable=no");
    WindowObject.document.writeln(printContents);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close(); 

  }

  downloadExl(elem){ 
 
  var table = document.getElementById("myTable");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html);  
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls");  
  return false;
  
  }

演示：https://stackblitz.com/edit/ngx-datatable-responsive-demo-v4bzat?file=app%2Fdemo-component.ts

【问题讨论】：

标签： css angular angular8 ngx-datatable

【解决方案1】：

为了解决这个问题，我不得不使用另一个库和工具来解决这个问题。通过创建我在整个应用程序中使用的服务。

import { Injectable } from "@angular/core";
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
   
@Injectable({
        providedIn: "root",
    })

export class PrintpdfService {
    constructor() {}

    exportAsPDF(div_id, doc_name = "tax") {
        let data = document.getElementById(div_id);
        window.scrollTo(0, 0);
        html2canvas(data).then((canvas) => {
            var wid = canvas.width;
            var hgt = canvas.height;
            var img = canvas.toDataURL("image/png");
            var hratio = hgt / wid;
            var doc = new jsPDF("p", "mm", "a4");
            var width = doc.internal.pageSize.width;
            var height = width * hratio;
            doc.addImage(img, "JPEG", 20, 20, width, height);
            doc.save(doc_name + ".pdf"); // Generated PDF
        });
    }

    printPdf(div_id) {
        let data = document.getElementById(div_id);
        window.scrollTo(0, 0);
        html2canvas(data).then((canvas) => {
            var wid = canvas.width;
            var hgt = canvas.height;
            var img = canvas.toDataURL("image/png");
            var hratio = hgt / wid;
            // var doc = new jsPDF("p", "mm", "a4");
            var doc = new jsPDF("p", "mm", [387, 210]);
            var width = doc.internal.pageSize.width;
            var height = width * hratio;
            doc.addImage(img, "JPEG", 20, 20, width, height);
            window.open(doc.output("bloburl"), "_blank");

            // doc.autoPrint({variant: 'non-conform'});
        });
    }
}

在我的component.html中

然后我将用这个道具包装我的 html - id="pdfTable" #pdfTable

在我的 component.ts 中

我将通过传递 id 来调用函数

【讨论】：