[WeChat ミニ プログラム] Excel レポートをエクスポートして共有し、xlsx ライブラリを使用して Excel を生成し、echars を使用してグラフを挿入し、pdfmake を使用して PDF ファイルにエクスポートします。

ここにディレクトリのタイトルを書きます

EXCELの生成

WeChat アプレットで Excel レポートをエクスポートして共有するには、サードパーティのライブラリを使用してxlsxExcel ファイルを生成し、wx.saveFileメソッドを使用してファイルをローカルに保存し、wx.shareFileメソッドを使用してファイルを共有します。

以下は、WeChat アプレットで Excel レポートをエクスポートして共有する方法を示すサンプル コードです。

  1. まず、依存ライブラリをインストールしますxlsx。npm を使用してインストールできます。
npm install xlsx
  1. ライブラリをアプレット ページに導入しxlsx、Excel レポートをエクスポートするメソッドを定義します。
// 引入依赖库
const XLSX = require('xlsx');

// 定义导出 Excel 报表的方法
function exportExcel(data, filename) {
    
    
  const workbook = XLSX.utils.book_new();
  const sheet = XLSX.utils.aoa_to_sheet(data);

  XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet1');

  const excelBuffer = XLSX.write(workbook, {
    
     bookType: 'xlsx', type: 'array' });
  const filePath = `${
      
      wx.env.USER_DATA_PATH}/${
      
      filename}.xlsx`;

  wx.saveFile({
    
    
    tempFilePath: filePath,
    filePath: filePath,
    success: function(res) {
    
    
      const savedFilePath = res.savedFilePath;

      wx.shareFile({
    
    
        filePath: savedFilePath,
        success: function(res) {
    
    
          console.log('分享成功');
        },
        fail: function(error) {
    
    
          console.log('分享失败', error);
        }
      });
    },
    fail: function(error) {
    
    
      console.log('保存文件失败', error);
    }
  });
}

上記のコード例では、ステートメントを通じてライブラリをrequire導入しました。xlsx次に、 という名前のメソッドが定義されます。このメソッドは、エクスポートされるデータとエクスポートされるファイルのファイル名というexportExcel2 つのパラメーターを受け取ります。datafilename

exportExcelこのメソッドでは、xlsxライブラリを使用してデータを Excel 形式に変換し、XLSX.writeメソッドを使用してブックを配列に書き込みます。次に、wx.saveFile配列をローカル ファイルに保存するメソッドと、wx.shareFileファイルを共有するメソッドを使用します。

次に、メソッドを呼び出してexportExcelExcel レポートをエクスポートし、ファイルを共有できます。

// 示例数据
const data = [
  ['姓名', '年龄', '性别'],
  ['张三', 25, '男'],
  ['李四', 30, '女'],
  ['王五', 28, '男']
];

// 调用导出 Excel 报表的方法
exportExcel(data, '报表');

上の例では、dataエクスポートするデータを含む という名前の配列を定義しました。次に、exportExcelExcel レポートをエクスポートするメソッドを呼び出し、ファイル名を指定します'报表'

上記のサンプル コードは参照のみを目的としており、実際のニーズに応じて特定の実装を調整する必要がある場合があることに注意してください。

概要とグラフを挿入する

echartsライブラリを使用してグラフを生成します。

以下は、Excel レポートをエクスポートし、WeChat アプレットの概要にグラフを挿入する方法を示すサンプル コードです。

  1. まず、依存ライブラリをインストールしますxlsx。npmechartsを使用してインストールできます。
npm install xlsx echarts
  1. xlsxおよびライブラリをアプレット ページに導入しecharts、グラフ データを生成するメソッドを定義します。
// 引入依赖库
const XLSX = require('xlsx');
const echarts = require('echarts');

// 定义生成图表数据的方法
function generateChartData() {
    
    
  const xAxisData = ['张三', '李四', '王五', '赵六'];
  const seriesData = [85, 90, 95, 80];

  return {
    
    
    xAxis: {
    
    
      type: 'category',
      data: xAxisData
    },
    yAxis: {
    
    
      type: 'value'
    },
    series: [{
    
    
      data: seriesData,
      type: 'bar'
    }]
  };
}

上記のコード例では、ステートメントを通じてとライブラリrequireを導入しました。次に、というメソッドが定義され、グラフのデータを生成するために使用されます。xlsxechartsgenerateChartData

generateChartDataこのメソッドでは、チャートの x 軸と y 軸のデータをそれぞれ表す と の配列をxAxisData定義します。seriesDataこのデータは、チャートの構成情報を含むオブジェクトに組み立てられます。

次に、echartsライブラリを使用してグラフを生成し、グラフ データを Excel ファイルの概要に挿入できます。

// 定义导出 Excel 报表的方法
function exportExcel(data, filename) {
    
    
  const workbook = XLSX.utils.book_new();
  const sheet = XLSX.utils.aoa_to_sheet(data);

  // 生成图表数据
  const chartData = generateChartData();

  // 创建 chart sheet
  const chartSheet = XLSX.utils.aoa_to_sheet([
    ['姓名', '成绩'],
    ['张三', chartData.series[0].data[0]],
    ['李四', chartData.series[0].data[1]],
    ['王五', chartData.series[0].data[2]],
    ['赵六', chartData.series[0].data[3]],
  ]);

  // 在 chart sheet 中插入图表
  const chart = echarts.init(document.createElement('canvas'), null, {
    
    
    devicePixelRatio: 2
  });
  const option = chartData;
  chart.setOption(option);
  const chartImage = new Image();
  chartImage.src = chart.getDataURL({
    
    
    type: 'png',
    pixelRatio: 2
  });
  XLSX.utils.sheet_add_image(chartSheet, chartImage, {
    
    
    tl: {
    
     col: 0, row: 6 },
    br: {
    
     col: 5, row: 18 }
  });

  // 添加 sheets 到 workbook
  XLSX.utils.book_append_sheet(workbook, sheet, '数据');
  XLSX.utils.book_append_sheet(workbook, chartSheet, '汇总');

  // 生成 Excel 文件
  const excelBuffer = XLSX.write(workbook, {
    
     bookType: 'xlsx', type: 'array' });
  const filePath = `${
      
      wx.env.USER_DATA_PATH}/${
      
      filename}.xlsx`;

  // 保存文件并分享
  wx.saveFile({
    
    
    tempFilePath: filePath,
    filePath: filePath,
    success: function(res) {
    
    
      const savedFilePath = res.savedFilePath;

      wx.shareFile({
    
    
        filePath: savedFilePath,
        success: function(res) {
    
    
          console.log('分享成功');
        },
        fail: function(error) {
    
    
          console.log('分享失败', error);
        }
      });
    },
    fail: function(error) {
    
    
      console.log('保存文件失败', error);
    }
  });
}

上記のコード例では、exportExcelチャート データを生成し、そのチャートを Excel ファイルの概要に挿入するメソッドに追加のロジックを追加しました。

まず、chartSheetというチャートシートを作成し、XLSX.utils.aoa_to_sheetチャートデータをシートデータに変換するメソッドを使用しました。次に、echartsライブラリを使用してチャート インスタンスを作成し、チャートの構成項目を設定します。次に、chart.getDataURLチャートを画像に変換するメソッドを使用し、XLSX.utils.sheet_add_imageチャート画像をチャート シートに挿入するメソッドを使用します。

最後に、データ シートとグラフ シートをワークブックに追加し、XLSX.writeメソッドを通じてワークブックを配列に書き込みます。次に、wx.saveFile配列をローカル ファイルに保存するメソッドと、wx.shareFileファイルを共有するメソッドを使用します。

次に、メソッドを呼び出してexportExcelExcel レポートをエクスポートし、ファイルを共有できます。

// 示例数据
const data = [
  ['姓名', '年龄', '性别'],
  ['张三', 25, '男'],
  ['李四', 30, '女'],
  ['王五', 28, '男']
];

// 调用导出 Excel 报表的方法
exportExcel(data, '报表');

上の例では、dataエクスポートするデータを含む という名前の配列を定義しました。次に、exportExcelExcel レポートをエクスポートするメソッドを呼び出し、ファイル名を指定します'报表'

上記のサンプル コードは参照のみを目的としており、実際のニーズに応じて特定の実装を調整する必要がある場合があることに注意してください。

PDF にエクスポート

生成された Excel ファイルを PDF 形式に変換するには、サードパーティのライブラリxlsxと を使用できますpdfmakeまず、 を使用してxlsxExcelファイルをデータとして読み込み、 を使用してpdfmakeデータをPDF形式に変換します。

以下は、生成された Excel ファイルを PDF に変換する方法を示すサンプル コードです。

  1. まず、依存ライブラリをインストールしますxlsx。npmpdfmakeを使用してインストールできます。
npm install xlsx pdfmake
  1. xlsxとライブラリをアプレット ページに導入しpdfmake、Excel ファイルを PDF に変換するメソッドを定義します。
// 引入依赖库
const XLSX = require('xlsx');
const pdfMake = require('pdfmake/build/pdfmake');
const pdfFonts = require('pdfmake/build/vfs_fonts');

// 注册字体
pdfMake.vfs = pdfFonts.pdfMake.vfs;

// 定义将 Excel 文件转换为 PDF 的方法
function convertToPDF(filePath, callback) {
    
    
  // 读取 Excel 文件
  const wb = XLSX.readFile(filePath);

  // 将 Excel 数据转换为 JSON 对象
  const sheetName = wb.SheetNames[0];
  const worksheet = wb.Sheets[sheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet, {
    
     header: 1 });

  // 将 JSON 对象转换为 PDF
  const docDefinition = {
    
    
    content: [
      {
    
    
        table: {
    
    
          body: jsonData
        }
      }
    ]
  };

  const pdfDocGenerator = pdfMake.createPdf(docDefinition);
  pdfDocGenerator.getBlob((blob) => {
    
    
    if (typeof callback === 'function') {
    
    
      callback(blob);
    }
  });
}

上記のコード例では、ステートメントを通じてとライブラリrequireを導入しました。次に、PDF を生成するときに使用するフォント ファイルを登録しました。xlsxpdfmake

次に、 という名前のメソッドが定義されます。このメソッドは、変換する Excel ファイルのパスを示すconvertToPDFパラメーターを受け取ります。filePathメソッドではxlsxExcel ファイルをメソッドでデータとして読み込み、XLSX.utils.sheet_to_jsonメソッドでデータを JSON オブジェクトに変換します。

次に、 を使用してpdfmakeJSON オブジェクトを PDF に変換します。PDF コンテンツの構造を定義するプロパティを持つdocDefinitionオブジェクトを作成します。contentこの例では、テーブルを使用して Excel データを表示します。

最後に、pdfMake.createPdfメソッドを通じて PDF ドキュメント ジェネレーターを作成し、getBlobメソッドを使用して生成された PDF を Blob オブジェクトに変換し、コールバック関数を通じてそれを返します。

次に、convertToPDFメソッドを使用して生成された Excel ファイルを PDF に変換し、ローカルに保存したり共有したりするなどのさらなる操作を実行できます。

// 调用将 Excel 文件转换为 PDF 的方法
convertToPDF('path/to/excel.xlsx', (pdfBlob) => {
    
    
  // 在这里可以进行进一步的操作,比如保存到本地或分享
});

convertToPDF上の例では、メソッドを呼び出し、Excel ファイルへのパスを渡しました。コールバック関数では、生成された PDF Blob オブジェクトに対して、ローカルに保存したり共有したりするなど、さらなる操作を実行できます。

上記のサンプル コードは参照のみを目的としており、実際のニーズに応じて特定の実装を調整する必要がある場合があることに注意してください。また、ミニプログラムではファイルシステムの操作に制限があり、PDF ファイルを直接保存・共有できない場合があり、実際の状況に応じて調整が必要になる場合があります。

おすすめ

転載: blog.csdn.net/gao511147456/article/details/132009965