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

因为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,需要声明一下全局变量

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

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

TypeScript 复制代码
// 需要打印的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查看样式后再对应进行修改

相关推荐
ᥬ 小月亮4 分钟前
webpack基础
前端·webpack
YongGit23 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试