vue HTML导出Word文档的使用和遇到的分页和图片问题

flora078

已于 2024-07-24 10:47:58 修改

阅读量282

点赞数 3

文章标签： vue.js html word

于 2024-07-24 10:46:19 首次发布

本文链接：https://blog.csdn.net/flora078/article/details/140656048

版权

vue项目中需要html转换word功能，使用了html-docx-js和file-saver 插件.

一、安装插件

npm install html-docx-js -S
npm install file-saver -S

二、主要代码

<template>
  <div>
    <a @click="export">导出</a>
    <div ref="content" id="content">
      <div>第一页</div>
      <br style="page-break-before: always" />
     <div>第二页</div>
      <img :src="url" alt="" width="200" height="200" />
    </div>
  </div>
</template>
<script>
import htmlDocx from 'html-docx-js/dist/html-docx'
import { saveAs } from 'file-saver'

export default {
  data() {
    return {
    }
  },
  methods: {
    export() {
      let contenthtml= document.getElementById('content').innerHTML
      contenthtml= contenthtml.replace(/break-(after|before): page/g, 'page-break-$1: always;')
      let cssHTML = `#content{
  width: 100%;
  height: auto;
}`

      let content = `
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
${cssHTML}
</style>
</head>
<body>
${contenthtml}
</body>
</html>`
       // 转换HTML为Docx文档
      let converted = htmlDocx.asBlob(content)
      // 保存文件
      saveAs(converted, '文件.docx')
    },
  },
}
</script>

<style lang="less" scoped>
#content{
  width: 100%;
  height: auto;
}
</style>

使用操作很简单。就不详细说了，按步骤就能实现基本的导出了

三、遇到的问题

1、分页的问题

也在网上查了一下，总是不起效果，后来终于解决了。
在div之前插入分页符:page-break-before:always
在div之后插入分页符：page-break-after:always
按需使用

  <br style="page-break-before: always" />

//注意：分页标签一定要用br div没有效果

2、图片导出大小问题

注意：通过style或class样式，宽高是不生效的，只有使用img的原生属性

<img :src="url" alt="" width="200" height="200" />

总之使用html 导出word还是比较简单方便。

flora078

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫