vue 导出文档功能

vue yekong 111℃

vue实现导出word文档功能,导出数据表格,结合html2canvas实现导出图片

运行实例

github地址

github地址

代码

/**
* @Author: 858834013@qq.com
* @Name: exportDocument
* @Date: 2022-03-06
* @Desc: 导出文档
*/
<template>
  <div>
    <div class="exportDocument" ref="exportDocument">
    </div>
    <div class="buttonss">
      <el-button @click="saveWord" type="primary">导出word</el-button>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import {s2ab} from "./utils/utils";
import fileSaver from 'file-saver'
import {MyDoc} from './utils/mydoc'

export default {
  name: "downword",
  data: function () {
    return {
      list: [
        ['标题1', '标题2', '标题3', '标题4'],
        ['内容1', '内容2', '内容3', '内容4'],
      ]
    }
  },
  mounted() {

  },
  methods: {
    saveWord() {
      var that = this;
      let doc = new MyDoc()
      document.body.scrollTop = document.documentElement.scrollTop = 0
      html2canvas(this.$refs.exportDocument, {scrollY: 0}).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        doc.addHeader('标题1', '1', {'textAlign': 'center'})
        doc.addHeader('标题2', '2', '')
        doc.addHeader('标题3', '3', '')
        doc.addHeader('标题4', '4', '')
        doc.addHeader('标题5', '5', '')
        doc.addHeader('标题6', '6', '')
        doc.addImage(dataURL, 580, 350)
        doc.addTable(that.list, '')
        let data = doc.generate()
        let blob = new Blob([s2ab(atob(data))], {
          type: 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,'
        })
        try {
          fileSaver.saveAs(blob, '测试文档.docx')
        } catch (e) {
          console.log(e)
        }
        doc.generate()
      })
    }
  },
}
</script>

<style lang="less">
.exportDocument {
  background: #0F75C1;
  width: 100%;
  height: 100%;
  min-height: 100px;
}

.buttonss {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  padding-top: 200px;
}
</style>

喜欢 (0)