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

news/2025/2/21 8:43:09

 基础导出模板

javascript">    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.niftyadmin.cn/n/5860556.html

相关文章

Debian软件包重构

Explore projects GitLab 1. apt-get build-dep <pkg> ## 安装编译依赖包 2. apt source <pkg> ## 下载 <pkg> 包的源码 3. 创建 git &#xff0c;打补丁 4. dpkg-buildpackage -b -uc -us -d ## 重新打包编译 # 解压出包中的文件到 extract 目…

23种设计模式 - 空对象模式

模式定义 空对象模式&#xff08;Null Object Pattern&#xff09;是一种行为型设计模式&#xff0c;通过用无操作的空对象替代null值&#xff0c;消除客户端对空值的检查&#xff0c;避免空指针异常。其核心是让空对象与真实对象实现相同接口&#xff0c;但空对象不执行实际逻…

SpringSecurity初始化的本质

一、对SpringSecurity初始化的几个疑问 通过前面第一次请求访问的分析我们明白了一个请求就来后的具体处理流程 对于一个请求到来后会通过FilterChainProxy来匹配一个对应的过滤器链来处理该请求。那么这里我们就有几个疑惑。 FilterChainProxy什么时候创建的?过滤器链和对应的…

Llama 3.1 本地电脑部署 Linux系统 【轻松简易】

本文分享在自己的本地电脑部署 llama3.1&#xff0c;而且轻松简易&#xff0c;快速上手。 这里借助Ollama工具&#xff0c;在Linux系统中进行大模型部署~ Llama3.1&#xff0c;有三个版本&#xff1a;8B、70B、405B Llama 3.1 405B 是第一个公开可用的模型&#xff0c;在常识…

Mybatis的#{}和${}

#{}:预编译语句,用?对参数位置进行一个占位的操作,在数据库生成一个模版,等待后续填充.也可以推测出#在生成模版后的性能是比$快的. ${}:即时语句,提前的吧参数填充进去,在MySQL里就是一个完整的SQL语句. 填充逻辑不同 #{}会给String类型的参数自动的加上双引号,而${}则是直…

欢乐力扣:赎金信

文章目录 1、题目描述2、 代码 1、题目描述 赎金信&#xff0c;给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。magazine 中的每个字符只能在…

OpenCV机器学习(10)训练数据的一个核心类cv::ml::TrainData

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::ml::TrainData 类是 OpenCV 机器学习模块中用于表示训练数据的一个核心类。它封装了样本数据、响应&#xff08;标签&#xff09;、样本权重…

旧手机热点无法提供ipv6解决方法(emui 8 热点提供ipv6)

旧手机热点无法提供ipv6解决方法 手机&#xff1a;荣耀8x 系统版本: EMUI 8 网络&#xff1a;移动流量卡 解决方案 设置-》无线和网络-》移动网络-》接入点名称(APN)-》cmiot 修改 APN协议: IPv4/IPv6 修改 APN漫游协议: IPv4/IPv6