js前端下载excel和pdf ，png

需要按照依赖

import ExcelJs from 'exceljs';

import domtoimage from 'dom-to-image';

import jsPDF from 'jspdf';

import { debounce} from 'lodash';

  // 下载图片

  const handleDownloadImg = debounce(() => {

    domtoimage.toJpeg(document.getElementById('ldfx'), { quality: 0.95 })

      .then(function (dataUrl) {

        const title = "漏斗分析"

        const link = document.createElement('a');

        link.download = `${title}.png`;

        link.href = dataUrl;

        link.click();

      });

  }, 500);

  // 下载pdf

  const downPdf = async () => {

    domtoimage.toJpeg(document.getElementById('ldfx'), { quality: 0.95 })

      .then(function (dataUrl) {

        const pdf = new jsPDF();

        pdf.addImage(dataUrl, 'PNG', 0, 0, pdf.internal.pageSize.getWidth(), pdf.internal.pageSize.getHeight());

        const title = "漏斗分析"

        pdf.save(`${title}.pdf`);

      });

  };

//下载excel

const exportToExcel = (list) => {

    const data = list.map(res => {

      return { date: res.date, inflowNum: res.inflowNum, eventTransformNum: res?.stepDetail[0]?.eventTransformNum, eventTransformRate: `${res?.stepDetail[0]?.eventTransformRate}.00%` }

    })

    const sheetName = `漏斗图表.xlsx`;

    const headerName = 'RequestsList';

    // 获取sheet对象，设置当前sheet的样式

    const workbook = new ExcelJs.Workbook();

    const sheet = workbook.addWorksheet(sheetName);

    // 获取每一列的header

    const columnArr = [];

    for (const i in data[0]) {

      const tempObj = { name: '' };

      tempObj.name = i;

      columnArr.push(tempObj);

    }

    columnArr.forEach(res => {

      if (res.name == "date") {

        res.name = "日期"

      }

      if (res.name == "inflowNum") {

        res.name = "流入人数"

      }

      if (res.name == "eventTransformNum") {

        res.name = "转化人数"

      }

      if (res.name == "eventTransformRate") {

        res.name = "转化率"

      }

    })

    const datalist = data.map((e) => {

      const arr = [];

      for (const i in e) {

        arr.push(e[i]);

      }

      return arr;

    })

    console.log(columnArr, "99999", datalist);

    // 设置表格的主要数据部分

    sheet.addTable({

      name: headerName,

      ref: 'A1',

      headerRow: true,

      totalsRow: false,

      columns: columnArr || [{ name: '99' }],

      rows: datalist

    });

    const table = sheet.getTable(headerName);

    table.commit();

    const writeFile = (fileName, content) => {

      const link = document.createElement('a');

      const blob = new Blob([content], {

        type: 'application/vnd.ms-excel;charset=utf-8;'

      });

      link.download = fileName;

      link.href = URL.createObjectURL(blob);

      link.click();

    };

    // 表格的数据绘制完成，定义下载方法，将数据导出到Excel文件

    workbook.xlsx.writeBuffer().then((buffer) => {

      writeFile(sheetName, buffer);

    });

  };

//如果pdf失真的情况可以使用下面这个方法

import html2canvas from 'html2canvas';

import { message } from "antd"

import jsPDF from 'jspdf';

import { toPng, toJpeg, toBlob, toPixelData, toSvg, toCanvas } from 'html-to-image';

// 有底部边距

// ele:any 需要到处的dom元素 pdfName:any导出文件名称

const downloadPDF1 = (ele, pdfName) => {

    toCanvas(ele)

        .then(function (canvas) {

            // document.body.appendChild(canvas);

            var contentWidth = canvas.width;

            var contentHeight = canvas.height;

            //一页pdf显示html页面生成的canvas高度;

            var pageHeight = contentWidth / 592.28 * 841.89;

            //未生成pdf的html页面高度

            var leftHeight = contentHeight;

            //页面偏移

            var position = 0;

            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

            var imgWidth = 595.28;

            var imgHeight = 592.28 / contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)

            //当内容未超过pdf一页显示的范围，无需分页

            if (leftHeight < pageHeight) {

                console.log(imgWidth, imgHeight, 'imgWidth, imgHeight')

                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

            } else {

                while (leftHeight > 0) {

                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

                    leftHeight -= pageHeight;

                    position -= 841.89;

                    //避免添加空白页

                    if (leftHeight > 0) {

                        pdf.addPage();

                    }

                }

            }

            pdf.save(`${pdfName}.pdf`);

        }).catch((err) => {

            console.log(err)

            message.warning("导出PDF失败")

        });

}

export default downloadPDF1