html页面导出为word文件后表格无边框、表格双线边框，图片大小无法设置问题解决办法 |
您所在的位置：网站首页 › 网页打印边框怎么设置的 › html页面导出为word文件后表格无边框、表格双线边框，图片大小无法设置问题解决办法 |
html页面导出为word文件后表格无边框、表格双线边框，图片大小无法设置问题解决办法
|
导出工具
html-docx-js-typescript file-saver 踩坑经历及原因使用SunEditor编辑页面，然后要将编辑过的页面导出为word文件。 用sunEditor插件的getContent方法，获取的页面html标签的字符串中，没有带标签上的style属性。 1、没有边框解决办法使用获取dom元素的innerHTML可以拿到带style标签的html文本字符串，这时只要你在style中设置了边框，导出的表格就有边框了。 import { saveAs } from 'file-saver'; import { asBlob } from 'html-docx-js-typescript' const innerHtmlStr = document.querySelector('.sun-editor-editable')?.innerHTML; const htmlStr = ` ${innerHtmlStr } `; asBlob(htmlStr,{ orientation: 'landscape', margins: { top: 100 } }).then(data => { saveAs(data, `file.docx`) // save as docx file })但是到这里有个问题，导出的表格是有边框有双实线。 2、双边框解决办法
|
这时我们再去看innerHTML的字符串中，table的标签中，是没有border、border-collapse、 cellspacing这三个属性的。 
所以在html-docx-js-typescript在导出word时，识别表格的样式，需要识别标签自带的属性以及style中的样式才能正确展示。 因此，在拿到innerHTML后，我们需要对拿到的字符串进行处理，给每个table标签添加上border、border-collapse和cellspacing三个属性。 想要单线表格，就需要设置border=“0”，border-collapse=“collapse”，以及cellspacing=“-1”。【本文地址】
今日新闻 |
推荐新闻 |