vue导出word，word模版写法

核心代码在于提取富文本方法，和展示数据

1.提取富文本信息

getDomToStr(obj) {
      if (!obj) {
        return ''
      }
      const parser = new DOMParser()
      const doc = parser.parseFromString(obj, 'text/html')
      // 重置内容数组
      const contentArray = []
      // 提取所有元素
      const tags2 =
        ':not(img):not(html):not(head):not(body):not(strong):not(tr):not(td):not(table)'
      const paragraphs = doc.querySelectorAll(tags2)
      // 遍历 <p> 元素
      paragraphs.forEach((paragraph, index) => {
        // 判断当前元素是文字还是图片
        const img = paragraph.querySelectorAll('img')
        if (img?.length) {
          // 图片
          img?.forEach((v) => {
            contentArray.push({
              isText: false,
              isImage: true,
              src: getBase64(v.getAttribute('src'))
            })
          })
        } else {
          const content = paragraph.textContent.trim()
          // 文字
          if (content !== '') {
            contentArray.push({
              isText: true,
              isImage: false,
              content
            })
          }
        }
      })
      return contentArray
},

2.展示数据

{#annualInvestmentPlanText}{#isText}{content}{/}
{#isImage}
{%%src}
{/}{/annualInvestmentPlanText}

其实可以写成两行，但是可能是因为word和wps的空格表示不太一样的问题，wps可以打开，但是word会打不开

如下是两行，每一次换行都会在生成文本的时候被显示出来

{#annualInvestmentPlanText}{#isText}{content}{/}
{#isImage}{%%src}{/}{/annualInvestmentPlanText}

报错问题总结

1.图片问题

• 图片一定要是base64转换的才可以，否则报错。

• 图片信息不可以为空，否则报错

• 图片的前面要加两个%%，不然的话就是显示base64信息，也就是{%%src}

• {%%src}用这样显示图片部分的时候，一定要在左右两边有空格隔开，要么换行单独显示，否则报错

2.文本问题

• 文本需要单独在一行，不要和其他的拼接，也就是下面这个样子，因为文本信息是提取的富文本的，所以数据是动态的，如果不单独一行的话，数据就会拼接在一行，而不会换行

  {#annualInvestmentPlanText}{#isText}{content}{/}

• 虽然word文档可以通过对象的形式直接对变量进行模版书写，但是不可通过object[属性]也就是点的形式访问。

• 想要通过一个变量显示多个信息的话，可以通过将对象放入数组的形式，直接写属性名称来书写这部分模版。

  {#annualInvestmentPlanText}
  {属性名称}
  {/annualInvestmentPlanText}
  annualInvestmentPlanText 是一个数组 -> [ {text: '文本'} ]

• 状态判断，经过不断试错，和百度，最后想做状态判断的是通过布尔值来进行判断的

  {#isText}{content}{/}
  isText 是一个布尔值的变量

3.最严重的问题

• 有一个成功正常显示后，通过复制粘贴的形式修改变量，尽量避免手写，在wps修改word的空格留白时，图片会把文字的对齐方式改为居中

• 虽然看起来一摸一样，但是手写的通过删除留白部分后，文本还是会被图片影响，文字居中，就像下面这样，一模一样，第二个还是会被影响为文字居中

  1.年度投资计划
  {#annualInvestmentPlanText}{#isText}{content}{/}
  {#isImage}
  {%%src}
  {/}{/annualInvestmentPlanText}
  2.年度投资完成情况
  {#annualInvestmentCompletionText}{#isText}{content}{/}
  {#isImage}
  {%%src}
  {/}{/annualInvestmentCompletionText}