前端生成docx文档、excel表格、图片、pdf文件

一、前端将页面某区域内容下载为word文档:html-to-docx、file-saver插件组合使用
javascript 复制代码
import HTMLtoDOCX from 'html-to-docx';
import { saveAs } from 'file-saver';

const exportTest = async () => {
    const fileBuffer = await HTMLtoDOCX(
      `<h2>文件标题</h2><br>文件内容222`,
      null,
      {
        table: { row: { cantSplit: true } },
        footer: true,
        pageNumber: true,
        font: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
      },
    );
    saveAs(fileBuffer, `测试下载文件.docx`);
  }
二、前端将数据导出成excel表格:XLSX插件
javascript 复制代码
import * as XLSX from 'xlsx';

const downloadExcel = () => {
    const tableRows = [{'表头1':'111', 'name': 'zhangsan '}]
    const sheet = XLSX.utils.json_to_sheet(tableRows); //此处为表格的数据
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, sheet);
    XLSX.writeFile(wb, `${date.getTime()}.xlsx`);
  };
三、页面区域导出为图片:html2canvas插件
javascript 复制代码
import html2canvas from 'html2canvas';
import { useEffect, useRef } from 'react';


export const TestPage = () => {
const testRef = useRef(null);

const html2image = (url: any, fileName: any) => {
  // 创建一个虚拟的a标签
  let link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  // 触发点击事件进行下载
  link.click();
  // 下载完成后删除a标签
  setTimeout(function () {
    document.body.removeChild(link);
  }, 100);
};

const downloadImg = () => {
    const dom = testRef.current;
    html2canvas(dom, {
      useCORS: true,
      allowTaint: true,
    }).then((canvas: any) => {
      const url = canvas.toDataURL('image/png');
      html2image(url, new Date().getTime().toString());
    });
  };

return (
    <>
        <div onClick={() =>{downloadImg ()}}>导出</div>
        <div ref={testRef}>需要导出的页面区域</div>
    </>
)
}
四、前端导出为pdf文件:jsPDF
javascript 复制代码
import jsPDF from 'jspdf';
const htmlStringToPdf = async (dom: HTMLElement, name: string) => {
  html2canvas(dom, {
    scale: 1,
    y: -10,
  }).then((canvas: any) => {
    const imgWidth = 200;
    const pageHeight = 300;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    let heightLeft = imgHeight;
    let position = 0;
    heightLeft -= pageHeight;
    const doc = new jsPDF('p', 'mm', 'a4');
    doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      doc.addPage();
      doc.addImage(canvas, 'PNG', 0, position, imgWidth, imgHeight, '', 'FAST');
      heightLeft -= pageHeight;
    }
    doc.save(`${name}.pdf`);
  });
};
相关推荐
excel7 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼9 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙10 小时前
[译] Composition in CSS
前端·css
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix10 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript
NBtab10 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端