在HIGHCHART中导出PDF格式的表格和图表。

Question

我已经可以下载图表了。我在下载highchart中的图表和表格时遇到了麻烦，我通过许多解决方案，但在ANGULAR中没有得到任何解决方案。

Html文件 :

    <ion-content>
  <div [chart]="chart"></div>
  <div>
    <table id="datatable" class="table">
      <thead>
        <tr>
          <th></th>
          <th>Jane</th>
          <th>John</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Apples</th>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <th>Pears</th>
          <td>2</td>
          <td>0</td>
        </tr>
        <tr>
          <th>Plums</th>
          <td>5</td>
          <td>11</td>
        </tr>
        <tr>
          <th>Bananas</th>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <th>Oranges</th>
          <td>2</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <br />
    <button (click)="test()">
      download chart
    </button>
  </div>
</ion-content>

TS文件。

import { Component, OnInit, ViewChild } from "@angular/core";
import * as Highcharts from "highcharts";
import { Chart } from "angular-highcharts";

const Exporting = require("highcharts/modules/exporting");

@Component({
  selector: "app-line",
  templateUrl: "./line.page.html",
  styleUrls: ["./line.page.scss"],
})
export class LinePage implements OnInit {
  @ViewChild("lineChart", { static: false }) lineChart: any;
  chart: Chart;
  Highcharts = Highcharts;

  constructor() {

    this.chart = new Chart({
      data: {
        table: "datatable",
      },
      chart: {
        type: "column",
      },
      title: {
        text: "Data extracted from a HTML table in the page",
      },
      yAxis: {
        allowDecimals: false,
        title: {
          text: "Units",
        },
      },
      tooltip: {
        formatter: function () {
          return (
            "<b>" +
            this.series.name +
            "</b><br/>" +
            this.point.y +
            " " +
            this.point.name.toLowerCase()
          );
        },
      },
    });
  }
  test = () => {
    console.log(this.Highcharts.charts);
    this.Highcharts.charts["0"].exportChart({
      type: "image/jpeg",
      filename: "line-chart",
    });
  };

  ngOnInit() {}
}

模块文件 :

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

import { IonicModule } from "@ionic/angular";

import { LinePageRoutingModule } from "./line-routing.module";

import { LinePage } from "./line.page";


import { ChartModule, HIGHCHARTS_MODULES } from "angular-highcharts";
import * as more from "highcharts/highcharts-more.src";
import * as exporting from "highcharts/modules/exporting.src";
import * as heatChart from "highcharts/modules/heatmap";
import * as heatChartsrc from "highcharts/modules/heatmap.src";
import * as chartdata from "highcharts/modules/data";
import * as chartdatasrc from "highcharts/modules/data.src";
import * as boostcanvace from "highcharts/modules/boost-canvas";
import * as boostcanvacesrc from "highcharts/modules/boost-canvas.src";
import * as boost from "highcharts/modules/boost";
import * as boostsrc from "highcharts/modules/boost.src";
import * as access from "highcharts/modules/accessibility";
import * as accesssrc from "highcharts/modules/accessibility.src";

@NgModule({
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [
        heatChart,
        heatChartsrc,
        more,
        exporting,
        chartdata,
        chartdatasrc,
        boostcanvace,
        boostcanvacesrc,
        boost,
        boostsrc,
        access,
        accesssrc,
      ],
    },
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ChartModule,
    LinePageRoutingModule,
  ],
  declarations: [LinePage],
})
export class LinePageModule {}

上面我展示了我所有的项目代码。

所以你可以更好的理解。我正在通过下面的注释，但Angular不在该解决方案中。

Answer 1

下面是一个在Angular环境下如何渲染和导出自定义表格的例子。

演示。https:/codesandbox.iosangular-5pqqi

如果这不能帮助你请在某个在线编辑器上重现你的尝试。