前端生成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`);
  });
};
相关推荐
摸鱼仙人~3 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_4116719813 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年1 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉2 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端