Ionic 导出表格和图表在PDF中在HIGHCHART中带ANGULAR

ct3nt3jp  于 2023-03-06  发布在  Ionic
关注(0)|答案(2)|浏览(149)

我已经能够下载图表。我很麻烦下载图表和表格在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 不是在那个解决方案。

pdtvr36n

pdtvr36n1#

以下是如何在Angular 环境中渲染和导出自定义表格的示例。
演示:https://codesandbox.io/s/angular-5pqqi
如果这样做没有帮助,请在一些在线编辑器上重复您的尝试。

x6h2sr28

x6h2sr282#

此问题已在angular-highcharts的12.0.0版上解决。

相关问题