엑셀 생성

WeChat 애플릿에서 Excel 보고서를 내보내고 공유하려면 타사 라이브러리를 사용하여 xlsxExcel 파일을 생성하고 wx.saveFile해당 방법을 사용하여 파일을 로컬에 저장한 다음 wx.shareFile해당 방법을 사용하여 파일을 공유할 수 있습니다.

다음은 WeChat 애플릿에서 Excel 보고서를 내보내고 공유하는 방법을 보여주는 샘플 코드입니다.

먼저 종속 라이브러리를 설치합니다 xlsx. npm을 사용하여 다음을 설치할 수 있습니다.

npm install xlsx

애플릿 페이지에 라이브러리를 도입 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정의됩니다 .exportExceldatafilename

이 방법 에서는 라이브러리를 exportExcel사용하여 xlsx데이터를 Excel 형식으로 변환하고 XLSX.write통합 문서를 배열로 작성하는 방법을 사용합니다. 그런 다음 wx.saveFile배열을 로컬 파일에 저장하는 방법과 wx.shareFile파일을 공유하는 방법을 사용합니다.

exportExcel다음으로, Excel 보고서를 내보내고 파일을 공유하는 메서드를 호출할 수 있습니다 .

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

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

위의 예에서는 data내보낼 데이터가 포함된 배열을 정의했습니다. 그런 다음 exportExcel메서드를 호출하여 Excel 보고서를 내보내고 파일 이름을 지정합니다 '报表'.

위의 샘플 코드는 참고용일 뿐이며 실제 요구 사항에 따라 구체적인 구현을 조정해야 할 수도 있습니다.

요약 및 차트 삽입

echarts라이브러리를 사용하여 차트를 생성하세요.

다음은 Excel 보고서를 내보내고 WeChat 애플릿의 요약에 차트를 삽입하는 방법을 보여주는 샘플 코드입니다.

먼저 종속 라이브러리를 설치 xlsx하고 echartsnpm을 사용하여 다음을 설치할 수 있습니다.

npm install xlsx echarts

애플릿 페이지에 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

이 메서드 에서는 차트의 x축과 y축 데이터를 각각 나타내는 및 배열을 generateChartData정의합니다 . 그런 다음 이 데이터는 차트의 구성 정보가 포함된 개체로 결합됩니다.xAxisDataseriesData

다음으로, 라이브러리를 사용하여 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파일을 공유하는 방법을 사용합니다.

exportExcel다음으로, Excel 보고서를 내보내고 파일을 공유하는 메서드를 호출할 수 있습니다 .

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

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

위의 샘플 코드는 참고용일 뿐이며 실제 요구 사항에 따라 구체적인 구현을 조정해야 할 수도 있습니다.

PDF로 내보내기

생성된 Excel 파일을 PDF 형식으로 변환하려면 타사 라이브러리 xlsx와 pdfmake. 먼저 xlsxExcel 파일을 데이터로 읽어온 후, pdfmake데이터를 PDF 형식으로 변환하는 데 사용합니다.

다음은 생성된 Excel 파일을 PDF로 변환하는 방법을 보여주는 샘플 코드입니다.

먼저 종속 라이브러리를 설치 xlsx하고 pdfmakenpm을 사용하여 다음을 설치할 수 있습니다.

npm install xlsx pdfmake

애플릿 페이지에 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메서드에서는 xlsx메서드를 사용하여 Excel 파일을 데이터로 읽고 XLSX.utils.sheet_to_json메서드를 사용하여 데이터를 JSON 개체로 변환합니다.

pdfmake그런 다음 JSON 개체를 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 파일을 직접 저장 및 공유하지 못할 수도 있으므로 실제 상황에 따라 조정이 필요할 수 있습니다.

[WeChat Mini 프로그램] Excel 보고서 내보내기 및 공유, xlsx 라이브러리를 사용하여 Excel 생성, echars를 사용하여 차트 삽입, pdfmake를 사용하여 PDF 파일로 내보내기

여기에 디렉토리 제목을 쓰세요

엑셀 생성

요약 및 차트 삽입

PDF로 내보내기

추천