使用html-docx-js + fileSaver实现前端导出word

news2024/11/13 16:01:34

因为html-docx-js是16年的老库了,它代码里面用到的with语法现在严格模式不允许,用npm直接引入会报错,所以我们需要用其它方式引入

首先要将html-docx-js的代码放到项目中

html-docx-js/dist/html-docx.js at master · evidenceprime/html-docx-js · GitHub

我这边的vue项目,所以放到public文件下

代码里面几个with的用法需要改一下,因为现在都是默认严格模式了

全局搜一下with(,然后把涉及到的都改成类似如下的即可

接下来到项目的html文件中,使用script标签引入

如果使用typescript,需要声明一下全局变量

export declare global {
  interface Window {
    htmlDocx: any
    saveAs: (doc: any, name: string) => void
  }
}

这样子就可以在项目中愉快的使用了~使用方法如下:

// 需要打印的dom元素
const areaRef = ref()

const handleDownload = () => {
  const cssText = `
    th, td {
      border-color: red;
    }
  `
  const content = `
    <!DOCTYPE html>
    <html>
      <head>
        <style>
          ${cssText}
        </style>
      </head>
      <body>
        ${areaRef.value.outerHTML}
      </body>
    </html>
  `
  const converted = window.htmlDocx.asBlob(content, {
    orientation: 'landscape',
  })
  window.saveAs(converted, 'test.docx')
}

PS:如果遇到样式问题的话,比如图片宽高(需要使用img标签的width和height属性),字体大小(需要使用pt)不生效的话,可以先把对应的docx模板转成html查看样式后再对应进行修改

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

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

相关文章

java 日期

Date SimpleDateFormat Date d new Date();System.out.println(d);//输出当前时间long it d.getTime();//返回自1970年1月1日00:00:00到date的时间Date d2 new Date(it);//将毫秒值转换为时间System.out.println(d2);d2.setTime(it1000);//将d2转换为输入参数对应的时间Sys…

vue 后台管理 之 状态管理 vuex 的使用

幸福是一种能力 文章目录 一、数据驱动视图二、VueX 数据公共池 一、数据驱动视图 我们都知道 vue 之所以好用&#xff0c;是因为官方帮我们做了数据驱动视图初始化时将数据和视图进行绑定&#xff0c;通过 watcher 来监听数据的变化&#xff0c;当数据变化时&#xff0c;会触…

数据结构(邓俊辉)学习笔记】优先级队列 07——堆排序

1.算法 作为完全二叉堆的一个应用&#xff0c;这节来介绍堆排序算法。 是的&#xff0c;谈到优先级队列&#xff0c;我们很自然地就会联想到排序。因为就其功能而言&#xff0c;包括完全二叉堆在内的任何一种优先级队列都天生地具有选取功能&#xff0c;也就是选取其中的最大…

【微服务】SpringCloud 1-9章

1 从Boot和Cloud版本选型开始说起 1.1 Springboot版本选择 1.1.1 git源码地址 https://github.com/spring-projects/spring-boot/releases/ 1.1.2 官网看Boot版本 1.1.3 SpringBoot3.0崛起 https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Release-N…

SpringSecurity实现登录功能实战!!!

实现思路 登录 ①自定义登录接口 调用ProviderManager的方法进行认证 如果认证通过生成jwt 把用户信息存入redis中 ②自定义UserDetailsService 在这个实现类中去查询数据库 注意配置passwordEncoder为BCryptPasswordEncoder 退出登录&#xff0c;删除redis中的数…

vuex 辅助函数用法:mapGetters,mapMutations,mapActions

1 mapGetters:用法 <template> //普通用法 <p> {{ $store.getters.getCounter }} </p> //辅助函数用法 <p> {{ getCounter }} </p> </template> import { mapGetters } from vuex export default{ name:"homeView&q…

损失函数-回归模型|分类模型

损失函数 Loss Function 回归模型均方误差&#xff08;MSE: Mean Squared Error&#xff09;均方根误差&#xff08;RMSE&#xff1a;Root Mean Squared Error&#xff09;平均绝对误差&#xff08;MAE: Mean Absolute Error&#xff09;Huber损失 分类模型交叉熵损失&#xff…

MT6705 同步整流

MT6705B 是用于反激式变换器的高性能45V同步整流。MT6705B兼容各种反激转换器类型。支持 DCM、CCM 和准谐振模式。MT6705集成了一个40V功率MOSFET&#xff0c;可以取代肖特基二极管&#xff0c;提高效率。V SW <V TH-ON 时&#xff0c;内部 MOSFET 导通。V SW >V TH-OFF …

Qt/C++地图标注点的添加删除移动旋转/指定不同图标和动图/拿到单击信号

一、前言说明 标注点在地图开发中是最常见的应用场景之一&#xff0c;比如在地图上需要显示设备的位置&#xff0c;基本上都是添加标注点&#xff0c;指定图片和尺寸已经经纬度坐标位置。这个功能在每种地图内核中都提供的&#xff0c;这个并没有任何难点&#xff0c;在这个功…

类和对象 - 构造函数

文章目录 一、语言的向前兼容二、默认成员函数三、构造函数3.1 概念3.2 自己定义的构造函数3.2.1 有参和无参的构造函数3.2.1 有缺省参数的构造函数 3.3 默认构造函数3.3.1 几种默认构造函数3.3.2 默认构造函数的特点 3.4 编译器生成的默认构造函数3.4.1 函数初始化规则 四、构…

Android:动态更新app启动图标和应用名

一、需求背景 每逢重要佳节&#xff0c;很多应用启动图标会自动更新为对应佳节的图标&#xff0c;应用无需更新。 二、效果图 更新后的启动图标和应用名称 三、实现流程 Android app只能替换内置的icon&#xff0c;因此需要提前将logo图标放入App资源文件件里 实际项目App更新…

vue 路由用法 router-view

通过router-view 点击子路由显示子路由关于我们的内容&#xff0c;点击关于信息显示关于信息内容。

【Golang】火焰图空白部分是什么?

起因 被同事灵魂拷问&#xff1a;图中这块空白是什么东西&#xff1f; 豆包回答说是数据采样不完整&#xff0c;特定函数或代码段未被调用之类的原因&#xff0c;感觉都不太合理。 之前看过一篇文章说&#xff1a;Heap Profiling的采样是无时无刻不在发生的&#xff0c;执行…

【数据结构】——十大排序详解分析及对比

【数据结构】——十大排序详解分析及对比 文章目录 【数据结构】——十大排序详解分析及对比前言1. 排序的概念及其运用1.1 排序的概念1.2 排序的应用 2. 插入排序2.1 直接插入排序2.2 希尔排序 3. 选择排序3.1 选择排序3.2 堆排序 4 交换排序4.1 冒泡排序4.2 快速排序4.2.1 霍…

SOMEIP_ETS_047: echoUTF16FIXED_with_odd_number

测试目的&#xff1a; 验证设备&#xff08;DUT&#xff09;是否能够正确处理一个在终止符之后多出一个字节的echoUTF16FIXED字符串&#xff0c;并能够去除这个多余的字节。 描述 本测试用例旨在检查DUT在接收到一个不符合UTF16FIXED字符串规范&#xff08;即在终止符之后多…

Snipaste 的一款替代工具 PixPin,支持 gif 截图、长截图和 OCR 文字识别,功能不是一点点强!

Snipaste 的一款替代工具 PixPin&#xff0c;支持 gif 截图、长截图和 OCR 文字识别&#xff0c;功能不是一点点强&#xff01; PixPin 的名字来源于“Pixel Pin”&#xff0c;简单来说是一个截图、贴图的工具&#xff0c;但是 PixPin 以截图和贴图两大功能为核心做了大量的优…

高数4.3 分部积分法

1.性质 2.例题1-sin 有sinx ,cosx一定要想法变成一次方&#xff0c;有tanx,secx,cotx,cscx 要想法变换成偶次幂。 幂和三角函数在一次&#xff0c;要把三角函数放在d&#xff08;&#xff09;里面。 3. 例题2-tan 4. 例题3-反三角

树莓派开发笔记04-树莓派的PWM输出

github主页&#xff1a;https://github.com/snqx-lqh gitee主页&#xff1a;https://gitee.com/snqx-lqh 本项目github地址&#xff1a;https://github.com/snqx-lqh/RaspberryPiLearningNotes 本项目gitee地址&#xff1a;https://gitee.com/snqx-lqh/RaspberryPiLearningNote…

07结构型设计模式——装饰器模式

一、装饰器模式简介 装饰器模式&#xff08; Decorator Pattern&#xff09;又称包装模式。通过一种面向客户端透明的方式来扩展对象的功能&#xff0c;是继承关系的一个替换方案。装饰器模式就是把要添加的附加功能分别放在单独的类中&#xff0c;并让这个类包含它要装饰的对…

求前n项和5.3.1

求他的前n项和 #include <stdio.h>int main() {int n;int i;double sum0.0;scanf("%d", &n);for(i1; i<n; i){sum1.0/i;}printf("%f", sum);return 0; } 一个变量是输入的变量 一个变量要表达递增的 另外一个变量把他们加起来表示总和…