前端导出word文件,并包含导出Echarts图表等

news2025/5/24 19:09:09

 基础导出模板

    const html = `<html>
    <head>
      <style>
        body {
          font-family: 'Times New Roman';
        }
    
        h1 {
          text-align: center;
        }
    
        table {
          border-collapse: collapse;
          width: 100%;
          color: '#1118FF';
          font-weight: 600;
        }
    
        th,
        td {
          border: 1px solid black;
          padding: 8px;
          text-align: left;
        }
      </style>
    </head>
    
    <body>
      <div style="font-size: 20px;font-weight: 600;margin-bottom: 20px;margin-left: 15px;">
        附件:孜然卷测试问题主要问题汇总
      </div>
      <table>
        <thead>
          <tr>
            <th>科室</th>
            <th>住院号</th>
            <th>问题</th>
            <th>管床医生</th>
            <th>扣分</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>孜然卷科室test1</th>
            <th>住院号test1</th>
            <th>问题test1</th>
            <th>管床医生test1</th>
            <th>扣分test1</th>
          </tr>
        </tbody>
      </table>
    </body>
    
    </html>`;
    const blob = new Blob([html], {
      type: 'application/msword',
    });
    const link = document.createElement('a');
    link.download = `2025年2月导出.doc`;
    link.href = URL.createObjectURL(blob);
    link.click();

其中如果要加入Echarts图表,则需在创建Echarts图表时,将其myChartWord保存

在需要引用图片时 使用上面保存的myChartWord的getDataURL()函数
<img src=${this.state.myChartWord.getDataURL({ pixelRatio: 2, backgroundColor: '#fff' })}/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2301812.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【复现DeepSeek-R1之Open R1实战】系列8:混合精度训练、DeepSpeed、vLLM和LightEval介绍

这里写目录标题 1 混合精度训练1.1 FP16和FP321.2 优点1.3 存在的问题1.4 解决办法 2 DeepSpeed3 vLLM3.1 存在的问题3.2 解决方法3.2.1 PagedAttention3.2.2 KV Cache Manager3.2.3 其他解码场景 3.3 结论 4 LightEval4.1 主要功能4.2 使用方法4.3 应用场景 本文继续深入了解O…

大模型面经:SFT和RL如何影响模型的泛化或记忆能力?

监督微调 (SFT) 和强化学习 (RL)都是目前大模型的基础模型后训练技术&#xff0c;像DeepSeek-R1、kimi等的训练方法都将两种技术应用到了极致。 如何去设计训练步骤&#xff08;先SFT再RL&#xff0c;还是直接RL&#xff09;都需要对SFT和RL的能力有较深刻的了解。 本篇就以面…

2025-02-20 学习记录--C/C++-PTA 7-27 冒泡法排序

一、题目描述 ⭐️ 二、代码&#xff08;C语言&#xff09;⭐️ /** * 冒泡法实现升序 */#include <stdio.h>int main() {int N, // 整数个数 6K, // 扫描遍数 2num, // 待排序的整数 2 3 5 1 6 4numArr[100], // 待排序的整数合集 2 3 5 1…

RK3588配置成为路由器

文章目录 前言一、配置netplan二、安装hostapd1.创建hostapd.conf文件2.安装软件3.修改启动文件4.修改/etc/default/hostapd 文件 三、安装dnsmasq服务四、配置NET及重启验证五、常见问题总结 前言 RK3588开发板有两个网口&#xff0c;一个无线网卡。我需要配置为家用路由器模…

【数据挖掘】--算法

【数据挖掘】--算法 目录&#xff1a;1. 缺失值和数值属性处理1缺失值处理&#xff1a; 2. 用于文档分类的朴素贝叶斯3. 分治法&#xff1a;建立决策树4. 覆盖算法建立规则5. 挖掘关联规则6. 线性模型有效寻找最近邻暴力搜索&#xff08;Brute-Force Search&#xff09;kd树&am…

Huatuo热更新--如何使用

在安装完huatuo热更新插件后就要开始学习如何使用了。 1.创建主框渐Main 新建文件夹Main&#xff08;可自定义&#xff09;&#xff0c;然后按下图创建文件&#xff0c;注意名称与文件夹名称保持一致 然后新建场景&#xff08;Init场景&#xff09;&#xff0c;添加3个空物体…

基于Django快递物流管理可视化分析系统(完整系统源码+数据库+详细开发文档+万字详细论文+答辩PPT+详细部署教程等资料)

文章目录 基于Django快递物流管理可视化分析系统&#xff08;完整系统源码数据库详细开发文档万字详细论文答辩PPT详细部署教程等资料&#xff09;一、项目概述二、项目说明三、研究意义四、系统设计技术架构 五、功能实现六、完整系统源码数据库详细开发文档万字详细论文答辩P…

基于射频开关选择的VNA校准设计

活动发起人小虚竹 想对你说&#xff1a; 这是一个以写作博客为目的的创作活动&#xff0c;旨在鼓励大学生博主们挖掘自己的创作潜能&#xff0c;展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴&#xff0c;那么&#xff0c;快来参加吧&#xff01…

解决本地模拟IP的DHCP冲突问题

解决 DHCP 冲突导致的多 IP 绑定失效问题 前言 续接上一篇在本机上模拟IP地址。 在实际操作中&#xff0c;如果本机原有 IP&#xff08;如 192.168.2.7&#xff09;是通过 DHCP 自动获取的&#xff0c;直接添加新 IP&#xff08;如 10.0.11.11&#xff09;可能会导致 DHCP 服…

Elasticsearch7.1.1 配置密码和SSL证书

生成SSL证书 ./elasticsearch-certutil ca -out config/certs/elastic-certificates.p12 -pass 我这里没有设置ssl证书密码&#xff0c;如果需要设置密码&#xff0c;需要再配置给elasticsearch 在之前的步骤中&#xff0c;如果我们对elastic-certificates.p12 文件配置了密码…

毕业项目推荐:基于yolov8/yolo11的100种中药材检测识别系统(python+卷积神经网络)

文章目录 概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式&#xff09;功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…

自用题库---面试使用

1、css中如何实现水平垂直居中 方法一&#xff1a;flex&#xff1a; display: flex; justify-content: center; align-item: center;方法二&#xff1a;绝对定位margin:auto: position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto;方法三&#xff1a;已…

蓝桥杯好数

样例输入&#xff1a; 24 输出&#xff1a;7 输入&#xff1a;2024 输出&#xff1a; 150 思路&#xff1a;本题朴素方法的时间复杂度是O(n * log10(n)) &#xff0c;不超时。主要考察能否逐位取数&#xff0c;注意细节pi&#xff0c;这样不会改变i,否则会导致循环错误。 #in…

Jenkins 配置 Credentials 凭证

Jenkins 配置 Credentials 凭证 一、创建凭证 Dashboard -> Manage Jenkins -> Manage Credentials 在 Domain 列随便点击一个 (global) 二、添加 凭证 点击左侧 Add Credentials 四、填写凭证 Kind&#xff1a;凭证类型 Username with password&#xff1a; 配置 用…

用openresty和lua实现壁纸投票功能

背景 之前做了一个随机壁纸接口&#xff0c;但是不知道大家喜欢对壁纸的喜好&#xff0c;所以干脆在实现一个投票功能&#xff0c;让用户给自己喜欢的壁纸进行投票。 原理说明 1.当访问http://demo.com/vote/时&#xff0c;会从/home/jobs/webs/imgs及子目录下获取图片列表&…

mysql查看binlog日志

mysql 配置、查看binlog日志&#xff1a; 示例为MySQL8.0 1、 检查binlog开启状态 SHOW VARIABLES LIKE ‘log_bin’; 如果未开启&#xff0c;修改配置my.ini 开启日志 安装目录配置my.ini(mysql8在data目录) log-binmysql-bin&#xff08;开启日志并指定日志前缀&#xff…

BiRefNet C++ TensorRT (二分类图像分割)

BiRefNet C TensorRT &#xff08;二分类图像分割&#xff09; 利用TensorRT和CUDA的双边参考网络&#xff08;BiRefNet&#xff09;的高性能c实现&#xff0c;针对实时高分辨率二分类图像分割进行了优化。 BiRefNet c TENSORRT旨在有效地在GPU上运行双边参考分割任务。通过利…

【ARM】MDK在编译 i.MXRT1芯片的时候出现报错Error: L6079E

1、 文档目标 解决MDK在编译 i.MXRT1芯片的时候出现报错Error: L6079E 2、 问题场景 客户在使用NXP 的NXP i.MXRT1050的芯片进行工程构建的时候出现下面的报错信息&#xff1a; Error: L6079E: Subtool invocation error: Error executing armcc. The system could not find…

论文笔记(七十二)Reward Centering(二)

Reward Centering&#xff08;二&#xff09; 文章概括摘要2 简单的奖励中心 文章概括 引用&#xff1a; article{naik2024reward,title{Reward Centering},author{Naik, Abhishek and Wan, Yi and Tomar, Manan and Sutton, Richard S},journal{arXiv preprint arXiv:2405.0…

推荐几款较好的开源成熟框架

一. 若依&#xff1a; 1. 官方网站&#xff1a;https://doc.ruoyi.vip/ruoyi/ 2. 若依SpringBootVueElement 的后台管理系统&#xff1a;https://gitee.com/y_project/RuoYi-Vue 3. 若依SpringBootVueElement 的后台管理系统&#xff1a;https://gitee.com/y_project/RuoYi-Cl…