富文本编辑器html内容转word：html-docs-js避坑指南

1
const changeDiv2Ul = (div: HTMLElement | Element, parent?: HTMLElement | Element) => {
2
  const kind = div.getAttribute('data-list-kind')
3
  const ul = kind === 'ordered' ? document.createElement('ol') : document.createElement('ul')
4
  const li = document.createElement('li')
5
  // 去除margin 不然在word中会偏移
6
  !parent && (ul.style.margin = '0')
7
  li.innerHTML = div.innerHTML
8
  ul.appendChild(li)
9
  parent ? parent.insertAdjacentElement('afterend', ul) : div.insertAdjacentElement('afterend', ul)
10
  div.parentElement?.removeChild(div)
11

12
  li.querySelectorAll('.list-marker').forEach((marker) => marker.parentElement?.removeChild(marker))
13

14
  // 内容区域
15
  li.querySelectorAll('.list-content').forEach((content) => {
16
    const span = document.createElement('span')
17
    span.innerHTML = (content.firstChild as HTMLElement).innerHTML
18
    content.insertAdjacentElement('beforebegin', span)
19
    if (content.querySelectorAll('.prosemirror-flat-list').length) {
20
      content.querySelectorAll('.prosemirror-flat-list').forEach((div) => changeDiv2Ul(div, content))
21
    }
22
    content.parentElement?.removeChild(content)
23
  })
24
}
25
cloneEle.querySelectorAll('.prosemirror-flat-list').forEach((div) => changeDiv2Ul(div))

1
// 获取远程css资源 转为text文本
2
const handleCssStream = async (result: Response) => {
3
  if (!result.body) return ''
4
  const reader = result.body.getReader()
5
  const stream = await new ReadableStream({
6
    start(controller) {
7
      // The following function handles each data chunk
8
      function push() {
9
        // "done" is a Boolean and value a "Uint8Array"
10
        reader.read().then(({ done, value }) => {
11
          // If there is no more data to read
12
          if (done) {
13
            controller.close()
14
            return
15
          }
16
          // Get the data and send it to the browser via the controller
17
          controller.enqueue(value)
18
          // Check chunks by logging to the console
19
          push()
20
        })
21
      }
22
      push()
23
    },
24
  })
25
  const text = await new Response(stream, {
26
    headers: { 'Content-Type': 'text/html' },
27
  }).text()
28
  return text
29
}
30
/**
31
 * 处理css
32
 * 线上环境 <link rel="stylesheet" type="text/css" href="/css/365.f542e1fc.css">
33
 * 本地环境 <style type="text/css">
34
 */
35
const handleCss = async () => {
36
  const styles = document.head.querySelectorAll('style')
37
  const links = document.head.querySelectorAll('link[type="text/css"]')
38
  // @ts-ignore
39
  const remoteCSSPromise = [...links].map((link) => fetch(link.href))
40
  const remoteCSSResult = await Promise.allSettled(remoteCSSPromise)
41

42
  const remoteCSSStreamPromise = remoteCSSResult.map((item) => {
43
    // @ts-ignore
44
    const { status, value } = item
45
    if (status === 'fulfilled') return handleCssStream(value)
46
  })
47
  const remoteCSSStreamResult = await Promise.allSettled(remoteCSSStreamPromise)
48
  console.log('remoteCSSStreamResult', remoteCSSStreamResult)
49
  const cssText = remoteCSSStreamResult.map((item) => {
50
    // @ts-ignore
51
    const { status, value } = item
52
    if (status === 'fulfilled') return value
53
  })
54
  styles.forEach((css) => cssText.push(css.innerHTML))
55
  return cssText
56
}