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

news/2024/12/21 6:42:58/
一、前端将页面某区域内容下载为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`);});
};


http://www.ppmy.cn/news/1556853.html

相关文章

细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV

目录 一、工程配置 1、时钟、DEBUG 2、GPIO 3、SPI2 4、USART3 5、NVIC 二、软件设计 1、FALSH &#xff08;1&#xff09;w25flash.h &#xff08;2&#xff09; w25flash.c 1&#xff09;W25Q16基本操作指令 2&#xff09;计算地址的辅助功能函数 3&#xff09;器…

Flutter 开关属性

Switch 构造函数的样式 const Switch({Key? key,required this.value, // 当前开关的状态&#xff0c;布尔值&#xff08;true 表示打开&#xff0c;false 表示关闭&#xff09;required this.onChanged, // 状态切换时的回调函数&#xff0c;执行您定义的逻…

大数据-255 离线数仓 - Atlas 数据仓库元数据管理 数据血缘关系 元数据

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

不同协议下的接口测试方案设计

什么是多协议接口测试&#xff1f; 多协议接口测试是指在不同协议&#xff08;如HTTP、HTTPS、TCP/IP、SOAP、REST等&#xff09;下进行的接口测试。这类测试的主要目标是确保不同协议间的组件可以顺畅地进行通信&#xff0c;从而提高系统的整体可用性和稳定性。接口测试不仅可…

回归预测 | MATLAB实现CNN-BiLSTM卷积神经网络结合双向长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现CNN-BiLSTM卷积神经网络结合双向长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现CNN-BiLSTM卷积神经网络结合双向长短期记忆神经网络多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 CNN-BiLSTM,即卷积神经…

linux CentOS系统上卸载docker

一、停止Docker服务 首先&#xff0c;需要停止Docker服务。使用systemctl命令来停止Docker服务&#xff1a; bash复制代码sudo systemctl stop docker二、卸载Docker软件包 接下来&#xff0c;使用CentOS的包管理器yum来卸载Docker软件包。根据安装的Docker版本和组件&#…

Hmsc包开展群落数据联合物种分布模型分析通用流程(Pipelines)

HMSC&#xff08;Hierarchical Species Distribution Models&#xff09;是一种用于预测物种分布的统计模型。它在群落生态学中的应用广泛&#xff0c;可以帮助科学家研究物种在不同环境条件下的分布规律&#xff0c;以及预测物种在未来环境变化下的潜在分布范围。 举例来说&a…

点击数字层级从 admin.vue 跳转到 inviter-list.vue 组件

文章目录 1、admin.vue2、inviter-list.vue 1、admin.vue 好的&#xff0c;我们来分析一下代码中“层级”这一列的逻辑&#xff0c;并探讨它与后端的关联。 “层级” 列的逻辑 在您的代码中&#xff0c;“层级”列的渲染逻辑如下&#xff1a; <el-table-columnalign&quo…