核心代码在于提取富文本方法,和展示数据
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}