WPS WebOffice 开放平台WPS WebOffice 开放平台 | 开发文档

深色模式

插入非嵌入式图片 ​

通过图形的 AddPicture 接口向表格内插入图片，图片源可以是 Base64 字符串或者在线 URL 链接。

快速接入 ​

在 webview 环境下，集成最新版本的 JSSDK 代码，生成 sdk 实例并挂载到目标容器中，即可对目标表格进行快速预览。完整的接入流程请参考快速开始。

实现思路 ​

在组件内初始化 WebOffice SDK，并挂载至指定元素。新增添加图片按钮至页面右下角，悬浮显示并设置点击事件。用户点击按钮后将会拉起文件选择器，选好图片后将会获取到文件，进而转换为 base64 字符串，通过图形的 AddPicture 接口插入该图片，同时可以指定图片的长宽和位置。

参数说明 ​

属性数据类型默认值必填说明
FileName
String
是
要在其中创建图片的文件（可以是 Base64 字符串或者在线 URL 链接，链接需要与https://wwww.kdocs.cn同域名）
LinkToFile
Enum
是
确定是否将图片链接到从中创建该图片的文件，FileName为URL时设置为 -1。更多可看Enum.MsoTriState
SaveWithDocument
Enum
是
确定是否将已链接的图片插入到文档一起保存。 如果链接到文件为msoFalse，则此参数必须为msoTrue。更多可看Enum.MsoTriState
Left
Number
否
图片左边缘相对于表格左边缘的位置，单位 px
Top
Number
否
图片上边缘相对于表格片上边缘的位置，单位 px
Width
Number
否
图片的宽度，单位 px
Height
Number
否
图片的高度，单位 px
Scale
Boolean
否
是否按表格比例计算宽高和坐标

参考代码 ​

html
<template>
  <div class="demo">
    <div ref="webofficeEl" class="weboffice"></div>
    <div class="upload" @click="onAddPicture">
      <svg
        width="48"
        height="48"
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M44 24C44 22.8954 43.1046 22 42 22C40.8954 22 40 22.8954 40 24H44ZM24 8C25.1046 8 26 7.10457 26 6C26 4.89543 25.1046 4 24 4V8ZM39 40H9V44H39V40ZM8 39V9H4V39H8ZM40 24V39H44V24H40ZM9 8H24V4H9V8ZM9 40C8.44772 40 8 39.5523 8 39H4C4 41.7614 6.23857 44 9 44V40ZM39 44C41.7614 44 44 41.7614 44 39H40C40 39.5523 39.5523 40 39 40V44ZM8 9C8 8.44772 8.44771 8 9 8V4C6.23858 4 4 6.23857 4 9H8Z"
          fill="#333"
        />
        <path
          d="M6 35L16.6931 25.198C17.4389 24.5143 18.5779 24.4953 19.3461 25.1538L32 36"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M28 31L32.7735 26.2265C33.4772 25.5228 34.5914 25.4436 35.3877 26.0408L42 31"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M37 18L37 6"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M32 11L37 6L42 11"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue'

  let instance: any
  const webofficeEl = ref()

  onMounted(() => {
    import('../../../public/web-office-sdk-v1.1.19.es').then(WebOfficeSDK => {
      instance = WebOfficeSDK.config({
        url: 'https://kdocs.cn/l/ckvgX7eiVltZ',
        mount: webofficeEl.value
      })
    })
  })

  async function onAddPicture() {
    await instance.ready()
    const file = (await selectSingleImage()) as File

    if (file) {
      const base64String = await file2Base64(file)
      const shapes = await instance.Application.ActiveSheet.Shapes
      await shapes.AddPicture({
        FileName: base64String,
        LinkToFile: 0,
        SaveWithDocument: -1,
        Left: Math.random() * 200, // 图片距离左边位置
        Top: Math.random() * 200, // 图片距离顶部位置
        Width: 120, // 图片宽度
        Height: 120 // 图片高度
      })
    }
  }
  async function selectSingleImage() {
    return new Promise(resolve => {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/*'
      input.click()
      input.onchange = () => {
        resolve(input.files ? input.files[0] : null)
      }
    })
  }
  async function file2Base64(file: File) {
    return new Promise(resolve => {
      const reader = new FileReader()
      reader.onload = e => {
        resolve(e.target!.result)
      }
      reader.onerror = function () {
        resolve('')
      }
      reader.readAsDataURL(file)
    })
  }
</script>

<style scoped>
  .demo {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 997;
    background-color: #fff;
  }
  .weboffice {
    height: 100%;
  }
  .upload {
    position: fixed;
    right: 100px;
    bottom: 100px;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .upload:hover {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .upload:active {
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>