本帖最后由 badyun 于 2020-10-18 02:24 编辑
处理好了，演示如下图。我先演示了一遍js处理之前复制到word的样子，再演示了一遍js处理后复制到word的样子
代码如下，每个地方我都加了注释
[JavaScript] 纯文本查看 复制代码 // 获取所有文字内容
let s = document.getElementsByTagName('span')
// 遍历获取每个元素的位置
let e = {}
for (let index in s) {
let ele = s[index]
if (ele.className && ele.className.indexOf('fs-') != -1) {
let left = parseInt(ele.style.left.replace('px', ''))
let bottom = parseInt(ele.style.bottom.replace('px', ''))
let text = ele.innerText
let className = ele.className
// 将bottm一样的排到一个数组（因为他们是一行的）
if (e[bottom]) {
e[bottom].push({
text,
left,
bottom,
className
})
// 每行的内容排序
e[bottom].sort((a, b) => {
return a.left - b.left
})
} else {
e[bottom] = [{
text,
left,
bottom,
className
}]
}
}
}
// 对行数进行排序
let t = [];
Object.keys(e).sort().forEach(key => {
t.unshift(e[key])
});
// 页面构造完成，插入dom
let fa = document.getElementsByClassName('text')[0].getElementsByTagName('div')[0]
// 获取到样式
let style = fa.getElementsByTagName('style')[0]
// 去除对span的定位
style.innerText = style.innerText.replace(/[\r\n]/g, "").replace(/position\: absolute\;/g, '')
// 清空父标签
fa.innerHTML = ''
// 插入样式
fa.appendChild(style)
// 开始构造页面对象
for (let index in t) {
let eleT = t[index]
let p = document.createElement('div')
// 调整每行距离，让其跟原文样式保持一致
p.style.position = 'absolute'
p.style.bottom = eleT[0].bottom
p.style.left = eleT[0].left
for (let tIndex in eleT) {
let eleS = eleT[tIndex]
let span = document.createElement('span')
span.innerText = eleS.text
// 给span加上原本的class,因为class里面有对字体大小和颜色的设置
span.className = eleS.className
p.appendChild(span)
}
// 每一行插入父标签
fa.appendChild(p)
}
// 处理好的提示，可删除
alert('success!') | 
[复制链接]
发表于 2020-10-17 23:13
|
发表于 2020-10-17 23:39
