# 批量插入数据

在一些业务场景中，我们可能需要将一些自定义的文本、段落或者表格数据批量填充至文档，如果这些数据足够简单，那么我们通过[Range.Text](/app-integration-dev/docs-center/online-preview-edit/client/Word/Range.html#text)一个一个的设置也能实现需求。但当数据体量比较大，或者数据是带格式的，继续使用`Range.Text`不仅非常耗时而且极其容易出错。

我们推荐使用[PasteHtml](/app-integration-dev/docs-center/online-preview-edit/client/Word/Range.html#pastehtml)来完成数据的批量插入。首先，您需要根据实际业务场景提炼出您的业务数据，然后利用这些关键数据生成 HTML 字符串片段，最后通过我们的接口一次性插入至文档。

<script setup>
import BulkFillDemo from './components/BulkFillDemo.vue'
</script>

<BulkFillDemo />

下面的例子中我们将实现一个多段落 + 表格的 HTML 片段插入：

```js
/**
 * 插入数据
 */
async function fillContent() {
  const textArray = [
    '余忆童稚时，能张目对日，明察秋毫，见藐小之物必细察其纹理，故时有物外之趣。',
    '夏蚊成雷，私拟作群鹤舞于空中，心之所向，则或千或百，果然鹤也；昂首观之，项为之强。又留蚊于素帐中，徐喷以烟，使之冲烟而飞鸣，作青云白鹤观，果如鹤唳云端，为之怡然称快。',
    '余常于土墙凹凸处，花台小草丛杂处，蹲其身，使与台齐；定神细视，以丛草为林，以虫蚁为兽，以土砾凸者为丘，凹者为壑，神游其中，怡然自得。',
    '一日，见二虫斗草间，观之，兴正浓，忽有庞然大物，拔山倒树而来，盖一癞虾蟆，舌一吐而二虫尽为所吞。余年幼，方出神，不觉呀然一惊。神定，捉虾蟆，鞭数十，驱之别院。'
  ]
  const tableArray = Array.from({ length: 20 }, () =>
    Array.from({ length: 6 }, () => '测试文本')
  )
  const HTML = generateTextString(textArray) + generateTableString(tableArray)

  await app.ActiveDocument.Range(0, 0).PasteHtml({
    HTML
  })
}
/**
 * 生成文本HTML字符串
 * @param data 文本数据（字符串数组）
 *
 * @return 文本HTML字符串
 */
function generateTextString(data) {
  if (!Array.isArray(data)) throw TypeError('文本数据不合法')

  return data.map(item => `<p>${item}</p>`).join('')
}
/**
 * 生成表格HTML字符串
 * @param data 表格数据（二维数组）
 *
 * @return 表格HTML字符串
 */
function generateTableString(data) {
  if (!Array.isArray(data) || !Array.isArray(data[0]))
    throw TypeError('表格数据不合法')

  const rows = data.map(row => {
    const columns = row.map(column => `<td>${column}</td>`)
    return `<tr>${columns.join('')}</tr>`
  })

  return `<table>${rows.join('')}</table>`
}
```