前端生成PPT文档

需求

有的时候我们通过前端将应用的某些内容整理到PPT文档中，通过PPT文档展示给其他用户看

参考文档

https://vikeya.com/archives/1703660042725#heading-1
https://gitbrent.github.io/PptxGenJS/docs/api-text/#text-options
模版幻灯片 https://gitbrent.github.io/PptxGenJS/docs/masters/

示例代码

<template>
  <div class="app">
    <button @click="exportPPT_1">1. PPT导出基本使用</button>
    <br />
    <button @click="exportPPT_2">2. 文字添加-数组形式</button>
  </div>
</template>

<script>
import pptxgen from 'pptxgenjs'
export default {
  methods: {
    exportPPT_1() {
      let pptx = new pptxgen()
      let page1 = pptx.addSlide()
      page1.addText('Hello World!', {
        y: '10%', //相对于页面的位置
        h: '20%', //相对于页面的高度
        w: '100%', //元素宽度
        isTextBox: true, //是否为文本框
        fill: { color: '275591' }, //文本框填充颜色
        color: 'ffff00', //文本颜色
        align: 'center', //文本对齐方式
        fontSize: 48, //字体大小
        fontFace: '微软雅黑', //字体
        bold: true, //是否加粗
      })
      pptx.writeFile({ fileName: 'text_ppt' })
    },
    exportPPT_2() {
      let pptx = new pptxgen()

      // A3纸大小：420毫米*297毫米
      //  1毫米=10厘米
      //  1厘米 = 0.3937英尺
      // 16.5英尺 = 42/10*0.3937
      // 11.7英尺 = 297/10*0.3937
      // 1毫米=3.779px
      pptx.defineLayout({ name: 'A3', width: 16.5, height: 11.7 })
      pptx.layout = 'A3'

      let page1 = pptx.addSlide()
      page1.addText('主题描述', {
        y: 0, //相对于页面的位置
        x: 0, //相对于页面的位置
        h: '5%', //相对于页面的高度
        w: '100%', //元素宽度
        isTextBox: true, //是否为文本框
        color: 'ff0000', //文本颜色
        align: 'left', //文本对齐方式
        fontSize: 18, //字体大小
        fontFace: '微软雅黑', //字体
        bold: true, //是否加粗
      })

      page1.addText('Arial, 32pt, green, bold, underline, 0 inset', {
        x: 0.5,
        y: 5.0,
        w: '90%',
        margin: 0.5,
        fontFace: 'Arial',
        fontSize: 32,
        color: '00CC00',
        bold: true,
        underline: true,
        isTextBox: true,
      })

      page1.addText('Line 1\nLine 2\nLine 3', {
        x: 2,
        y: 3,
        color: 'DDDD00',
        fontSize: 90,
      })

      // EX: Format individual words or lines by passing an array of text objects with `text` and `options`
      page1.addText(
        [
          {
            text: 'word-level',
            options: {
              fontSize: 36,
              color: '99ABCC',
              align: 'right',
              breakLine: true,
            },
          },
          {
            text: 'formatting',
            options: { fontSize: 48, color: 'FFFF00', align: 'center' },
          },
        ],
        { x: 0.5, y: 4.1, w: 8.5, h: 2.0, fill: { color: 'F1F1F1' } }
      )

      // const arr_text = [
      //   {
      //     text: '描述点-1',
      //     options: {
      //       breakLine: true,
      //     },
      //   },
      //   {
      //     text: '描述点-2',
      //     options: {
      //       breakLine: true,
      //     },
      //   },
      //   {
      //     text: '描述点-3',
      //     options: {
      //       breakLine: true,
      //     },
      //   },
      // ]

      // page1.addText(arr_text, {
      //   x: 0,
      //   y: 1,
      //   w: '100%',
      //   // h: 0.5,
      // })
      pptx.writeFile({ fileName: 'text_ppt' })
    },
  },
}
</script>

<style lang="less" scoped></style>

个别配置

• 针对chart类型的显示的值设置保留2位小数。 dataLabelFormatCode: '0.00'

效果