HTML导出word文档（表格可编辑）原生JS版

最新推荐文章于 2024-06-20 14:42:45 发布

枝昻张

最新推荐文章于 2024-06-20 14:42:45 发布

阅读量2.3k

点赞数 18

分类专栏： web前端文章标签： html word javascript

本文链接：https://blog.csdn.net/Pseudo_love/article/details/134281578

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML导出word文档（表格可编辑）
注意如果预览是弹框查找需要导出的html外层套一个盒子，把关闭按钮放外边，既不影响预览，也不影响导出，v-if在导出时无法删掉。
写之前先引入外部JS文件
import $ from ‘./jquery.min.js’
import htmlDocx from ‘./html-docx.js’
import saveAs from ‘./FileSaver.js’
这三个文件自己在网站下载，都是有的

切记html中的表格一定要写原生原生原生！！！重要的事说三遍不能写element-ui中的el-table 否则表头和表格内容会错行

下面展示代码块（以下代码块为自己整理）
这个方法是导出

downDocx() {
      let contentDocument = $.clone(this.$refs.foo)
      let content = `<!DOCTYPE html><html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <style>
                  {{这里写的是导出文档的样式，外边style里的样式不生效}}
                </style>
            </head>
            <body>
                ${contentDocument.innerHTML}
            </body>
            </html>`

      let converted = htmlDocx.asBlob(content, {

        //这里是控制导出来的文档纸张大小
        // orientation: 'landscape',
        // margins: { top: 720, left: 720, right: 720, bottom: 720 },
      })
      saveAs(
        converted,
        '这里是导出文件的名字' + this.nowDate + '.docx'
      )

      //这里是删除DOM树上的图片，影响预览效果
      this.imageDoms.forEach((item) => {
        item.chartsDom.removeChild(item.image)
      })
      this.imageDoms = []
      //关闭弹框
      this.NotificationsShow = false

      let link = this.createDownloadLink(
        converted,
        '这里是导出文件的名字' + this.nowDate + '.docx'
      )
      this.$refs.downloadArea.innerHTML = ''
      this.$refs.downloadArea.appendChild(link)
    },

这个方法是利用canvas绘图

convertImagesToBase64(contentDocument) {
      // 找到所有的图片
      let imgs = contentDocument.querySelectorAll('img')
      // 图片转换用
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      imgs.forEach((img, i) => {
        if (img.src.startsWith('data:image')) return
        // img表现尺寸
        let realWidth = parseInt(img.style.width)
        let realHeight = parseInt(img.style.height)
        // 清空画布并调整为 img 的大小
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        canvas.width = realWidth
        canvas.height = realHeight
        // 画图片到画布
        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, realWidth, realHeight)
        // 画布转为 base64
        let dataURL = canvas.toDataURL()
        img.setAttribute('src', dataURL)
      })
      canvas.remove()
    },

convertChartsToBase64(contentDocument) {
      // 找到所有的图表 （echart）
      let canvases = contentDocument.querySelectorAll('canvas')
      // 遍历图表，转换为 base64 静态图片
      canvases.forEach((canvas, i) => {
        let echart = this.$refs.chart[i]
        let url = echart.getDataURL()
        let img = document.createElement('img')
        img.src = url
        canvas.parentNode.replaceChild(img, canvas)
      })
    },

createDownloadLink(fileObj, fileName) {
      let link = document.createElement('a')
      link.href = URL.createObjectURL(fileObj)
      link.download = fileName || 'document.docx'
      link.appendChild(document.createTextNode('如果没有自动下载，点这里'))
      return link
    },

echarts的标签上写id，切记不要写在外层盒子上
这个没有用html2canvas转，是用的echarts本身自带的方法

chartsF() {
      let chartsFirst = this.$echarts.init(document.getElementById('chartsOne'))
      let picOne = chartsFirst.getDataURL({
        type: 'png',
        pixelRatio: 1,
        backgroundColor: '#fff',
      })
      var img = new Image()
      img.src = picOne
      var myreplace = document.getElementById('chartsOne')
      ;(img.style.width = '60%'), (img.style.height = '300px')
      myreplace.appendChild(img)
      this.imageDoms.push({ chartsDom: myreplace, image: img })
},