vue的图表转换成图片添加到word文档中的demo

最新推荐文章于 2024-08-23 13:45:37 发布

2301_77774763

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量113

点赞数 3

文章标签： vue.js word javascript

本文链接：https://blog.csdn.net/2301_77774763/article/details/139243185

版权

<template>
  <div>
    <div style="width: 600px; height: 400px;" id="iconContent"></div>
    <button @click="ExportWord">导出Word</button>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import PizZip from 'pizzip';
import Docxtemplater from 'docxtemplater';
import ImageModule from 'docxtemplater-image-module-free';
import JSZipUtils from 'jszip-utils';
import { saveAs } from 'file-saver';

export default {
  name: 'LineChart',
  data() {
    return {
      evaluationInfo: {
       
        // 其他信息可以在这里添加
      },
      imgUrl: '',
      arr: [
        // 评语数组可以在这里添加
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '示例饼状图',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '销量',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 5, name: '衬衫' },
              { value: 20, name: '羊毛衫' },
              { value: 36, name: '雪纺衫' },
              { value: 10, name: '裤子' },
              { value: 10, name: '高跟鞋' },
              { value: 20, name: '袜子' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      let chart = echarts.init(document.getElementById("iconContent"));
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);

      // 获取图表的Base64图片数据
//       setTimeout(() => {
//         this.imgUrl = chart.getDataURL({
//         pixelRatio: 2, // 导出的图片分辨率比例，默认为 1。
//         backgroundColor: '#ccc' // 导出的图片背景色，默认使用 option 里的 backgroundColor
//       });
//       console.log(this.imgUrl);
// }, 1000);
chart.on('finished', () => {
        this.imgUrl = chart.getDataURL({
          pixelRatio: 2, // 导出的图片分辨率比例，默认为 1
          backgroundColor: '#fff' // 导出的图片背景色，默认使用 option 里的 backgroundColor
        });
        console.log(this.imgUrl);
      });
    },

    // 将base64图片转换为ArrayBuffer
    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = Buffer.from(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        bytes[i] = binaryString.charCodeAt(i);
      }
      return bytes.buffer;
    },

    // 导出Word文档
    ExportWord() {
      const _this = this;
      // 获取Word模板文件
      JSZipUtils.getBinaryContent("import.docx", function (error, content) {
        if (error) {
          throw error;
        }

        // 配置ImageModule
        let opts = {};
        opts.centered = true;
        opts.fileType = "docx";
        opts.getImage = (tag) => {
          return _this.base64DataURLToArrayBuffer(tag);
        };
        opts.getSize = () => {
          return [600, 400]; // 设置图片的宽和高
        };

        // 加载文档内容
        let zip = new PizZip(content);
        let doc = new Docxtemplater();
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);

        // 设置导出的数据
        doc.setData({
          
          arr: _this.arr, // 评语
          imgUrl:_this.imgUrl
        });

        try {
          // 渲染文档
          doc.render();
        } catch (error) {
          console.log(JSON.stringify({ error }));
          throw error;
        }

        // 生成并保存文档
        var out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        saveAs(out, "报告.docx");
      });
    }
  }
};
</script>

<style scoped>
/* 你可以在这里添加样式 */
button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
</style>