使用带有 html2canvas 或 html2pdf 的 jsPDF 将表格的全宽导出为 PDF

问题描述

我经常看到这个问题，但我一直找不到有效的答案。我试过的所有方法都切断了表格，只导出屏幕上的内容。

我正在使用 AG-GRID 来构建显示的表格。以下是我尝试过但对我不起作用的不同代码片段。

表格向右滚动大约 10-12 列。

  export(): void {
    // const DATA = this.myGrid.nativeElement;
    // const doc: jsPDF = new jsPDF("p","mm","a4");
    // doc.html(document.body,{
    //   callback: function (doc) {
    //     doc.save();
    //   },//   x: 10,//   y: 10
    // });


    // html2canvas(document.getElementById('myGrid')).then(function (canvas) {
    //   var wid = canvas.width
    //   var hgt = canvas.height
    //   var img = canvas.toDataURL("image/png");
    //   var hratio = hgt / wid
    //   var doc = new jsPDF({
    //     orientation: 'l',// landscape
    //     unit: 'pt',// points,pixels won't work properly
    //     format: [canvas.width,canvas.height] // set needed dimensions for any element
    //   });
    //   var width = doc.internal.pageSize.width;
    //   var height = width * hratio
    //   doc.addImage(img,'JPEG',width,height);
    //   doc.save('Test.pdf');
    // });


    // html2canvas(document.getElementById('myGrid')).then((canvas) => {
    //   const imgData = canvas.toDataURL('image/png');
    //   const pdf = new jsPDF({
    //     orientation: 'landscape',//   });
    //   const imgProps = pdf.getimageProperties(imgData);
    //   const pdfWidth = pdf.internal.pageSize.getWidth();
    //   const pdfheight = (imgProps.height * pdfWidth) / imgProps.width;
    //   pdf.addImage(imgData,'PNG',pdfWidth,pdfheight);
    //   pdf.save('download.pdf');
    // });


    var pdf = new jsPDF('p','pt','a3');
    // pdf.context2d.pageWrapY = pdf.internal.pageSize.height-20;
    const options = {
      name: 'output.pdf',image: { type: 'jpeg'},html2canvas: {},jsPDF : { orientation: 'landscape'}
    }
    const element: Element = document.getElementById('myGrid');
    html2pdf()
      .from(element)
      .set(options)
      .save();
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）