spreadjs添加水印

安装依赖包

pnpm add html2canvas-pro --registry=http://registry.npm.taobao.org

第一版

<template>
  <div id="capture">
    <p class="fillText">ZhangGuoGuo
      </p>
        <p class="fillText">ZhangGuoGuo
        </p>
  </div>
  <div id="ss" style="width:100%;height:98vh;border:1px solid darkgray"></div>
</template>

<script setup lang="ts">
import {onMounted} from "vue";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"
import "@grapecity-software/spread-sheets-designer-resources-cn"
import * as GC2 from "@grapecity-software/spread-sheets-designer"
import * as GC from "@grapecity-software/spread-sheets"
import "@grapecity-software/spread-sheets-vue";
//使用水印组件
import html2canvas from 'html2canvas-pro';

GC.Spread.Common.CultureManager.culture('zh-cn');

onMounted(()=>{
  const excelContainer = document.getElementById("ss")
  if(excelContainer!=null){
    const divContainer =  excelContainer as HTMLDivElement;
    var designer = new GC2.Spread.Sheets.Designer.Designer(divContainer);
    if(designer){
      console.log('成功')
    }
    var spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
    let pic:string='';
    html2canvas(document.getElementById("capture")).then(function (canvas) {
      pic = canvas.toDataURL();
      spread.options.backgroundImage = pic;
      spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
      setTimeout(() => {
        document.getElementById("vp_vp").style.backgroundRepeat = "repeat";
      }, 10);
    });
  }
})
</script>

<style>
#capture {
  background: #eee;
  width: 400px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5
}

.fillText {
  width: 160px;
  height: 160px;
  line-height: 160px;
  transform: rotate(-30deg);
  font-size: 30px;
  color: #fff;
}
</style>

效果

vp_vp参数是从html中获取的

第二版

<template>
  <div id="spread-host">
    <div ref="ssDesigner" style="height:700px;width:100%;text-align: left;"></div>

    <!--水印-->
<!--    <div id="wmId1" class="spread-ext-watermark">-->
<!--      <p class="fillText">测试的水印文字</p>-->
<!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from "vue";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"
import "@grapecity-software/spread-sheets-designer-resources-cn"
import * as GC2 from "@grapecity-software/spread-sheets-designer"
import * as GC from "@grapecity-software/spread-sheets"
import "@grapecity-software/spread-sheets-vue";

import html2canvas from 'html2canvas-pro';

GC.Spread.Common.CultureManager.culture('zh-cn');

const ssDesigner = ref(null);
let pic:string="";
onMounted(()=>{
  if(ssDesigner.value){
    const divElement = ssDesigner.value as HTMLDivElement;
    if(divElement)
    {
      var designer = new GC2.Spread.Sheets.Designer.Designer(divElement);
      if(!designer){
        console.log('生成失败')
        return;
      }
      var spread = designer.getWorkbook() as GC.Spread.Sheets.Workbook;
      if(!spread){
        console.log('获取Excel表失败')
        return;
      }
      spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged,()=>[
        setTimeout(() => {
          const excelCanvas =  document.getElementById('vp_vp');
          if(excelCanvas){
            excelCanvas.style.backgroundRepeat = 'repeat';
          }
        }, 10)
      ])
      //两种方式 第一种通过id获取
      // const wmId1Div = document.getElementById('wmId1');
      // if(!wmId1Div){
      //   console.log('水印不存在')
      //   return;
      // }
      //console.log(wmId1Div)
      //第二种通过js创建
      const wmId1Div = createWaterMarkElement('测试水印')
      console.log(wmId1Div)
      //添加水印代码
      html2canvas(wmId1Div).then(function (canvas) {
        pic = canvas.toDataURL();
        console.log('图片为'+pic)
        spread.options.backgroundImage = pic;
        wmId1Div.style.display='none';
        spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
        setTimeout(() => {
          const excelCanvas =  document.getElementById('vp_vp');
          if(excelCanvas){
            excelCanvas.style.backgroundRepeat = 'repeat';
          }
        }, 10);
      });
    }else{
      console.log('divElement不存在')
    }
  }
})

const createWaterMarkElement = (name:string)=>{
  const childDiv = document.createElement('p')
  childDiv.innerText=name;
  childDiv.style.textAlign='center';
  childDiv.style.width="100%";
  childDiv.style.height='200px';
  childDiv.style.lineHeight='200px';
  childDiv.style.transform='rotate(-30deg)';
  childDiv.style.fontSize='25px';
  childDiv.style.color='#f00';
  const waterMarkDiv = document.createElement('div')
  waterMarkDiv.style.background='#f5dede';
  waterMarkDiv.style.width='400px';
  waterMarkDiv.style.width='200px';
  waterMarkDiv.style.display='flex';
  waterMarkDiv.style.alignItems='center';
  waterMarkDiv.style.justifyContent='center';
  waterMarkDiv.style.position='absolute';
  waterMarkDiv.style.top='0';
  waterMarkDiv.style.left='0';
  waterMarkDiv.style.zIndex='-5';
  waterMarkDiv.appendChild(childDiv)
  //下面这句话必须写
  document.body.appendChild(waterMarkDiv)
  return waterMarkDiv;
}
</script>

<style>
.spread-ext-watermark {
    background: #f5dede;
    width: 400px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
}

.spread-ext-watermark p {
  text-align: center;
  width: 100%;
  height: 200px;
  line-height: 200px;
  transform: rotate(-30deg);
  font-size: 25px;
  color: #f00;
}
</style>

参考

https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/workbook/%E5%85%B6%E4%BB%96/realize-watermark-display
https://demo.grapecity.com.cn/spreadjs/help/docs/faqs/workbook/%E5%85%B6%E4%BB%96/realize-watermark-display
https://help.grapecity.com.cn/pages/viewpage.action?pageId=5971551