salesforce lwc页面上传PDF文件增加水印真实有效（支持上传大文件，理论2G）

lwc页面上传PDF文件增加水印真实有效（支持上传大文件，理论2G）

第一章 salesforce lwc上传pdf页面增加水印功能

前言

在salesforce中，使用lwc引用第三方js库实现pdf加水印功能。首次创作不易，如有帮助希望给个关注或者加粉丝。让我有动力写更多有帮助的文档。万分感谢！！！细节上有疑问欢迎联系，评论必回。着急加：the_most-handsomeMan

---

一、上传pdf文件加水印描述

1开发前期准备工作如下：

1.首先功能实现选择使用lwc组件。aura、vf组件也能实现。
2. 设置处理rest api 跨域问题。
3. 上传静态资源文件：上传第三方js库。pdf-lib库（实现加水印关键库）,jquery库。
4. 创建lwc页面。
5. javascript准备工作，引入第三方js库。pdf-lib库（实现加水印关键库）,jquery库。
6. 实现功能。

注：

此功能理论实现上传文件可以2G大小，只要前端页面不崩溃！！此功能“前提”是必须已经在云端的存在的文件数据，通过接口查询下载下来再进行渲染，然后重新上传到云端，做不到文件上传数据的时候同时加水印。文件上传后绑定关联关系等细节信息自行研究。

2.设置前端调用rest api跨域问题。打开设置，搜索“安全性”，在CORS、CPS授信站点添加访问的地址，可以模糊“*”设置访问地址。如下：

3.上传静态资源文件：上传第三方js库。pdf-lib库（实现加水印关键库）,jquery库。在设置中，搜索“静态资源”。然后把下载好的第三方js库上传到服务器。如下：

4.创建lwc组件代码。这里使用idea开发工具创建，如下：

前端代码如下：

<template>
    <lightning-card title="Create PDF File" icon-name="utility:user">
    </lightning-card>
    <div style="background-color: white; padding: 10px">
        <lightning-button label="Create PDF" onclick={
       loadPDF}></lightning-button>
        <template if:true={uploadFlag} >
            <div class="exampleHolder">
                <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>
            </div>
        </template>

    </div>

</template>

5.javascript准备工作，引入第三方js库。pdf-lib库（实现加水印关键库）,jquery库。不懂的，看参考资料。如下：

js代码如下注意：请求连接查询contentVersion的文件数据的时候，id在url固定写死的。拷贝代码可自行修改或者优化代码：

/**
 * @Author: ali
 * @Date: 2022-04-13 10:46:29
 * @LastEditors: ali
 * @LastEditTime: 2022-04-13 15:13:16
 * @Descripttion:  上传pdf文件增加水印
 */

import {
    LightningElement,wire,api,track } from 'lwc';
import {
    ShowToastEvent } from 'lightning/platformShowToastEvent';
import pdflib from "@salesforce/resourceUrl/pdflib";
import font_chinese from "@salesforce/resourceUrl/font_chinese";
import {
    loadScript } from "lightning/platformResourceLoader";
import getSessionId from '@salesforce/apex/ContentVersionHandle.getSessionId';
import jquery from '@salesforce/resourceUrl/jquery';
export default class UploadFileAndAddWatermark extends LightningElement {
   
    @api recordId;
    @track results;
    @track errors;
    @track resultStr;
    @track contentVersionId;
    @track uploadFlag;
    boundary;
    sessionId;
    Authorization;
    fileName = 'saber';
    ContentDocumentId = '0690w000001SGtlAAG';//'0690w000001SFTNAA4'


    //初始化回调函数
    connectedCallback() {
   

        //加载外部pdflibjs库
        loadScript(this, pdflib).then(() => {
   console.log('pdflib loaded完成');});
        loadScript(this, jquery).then(() => {
   console.log('JQuery loaded完成');});
        loadScript(this,font_chinese).then(() => {
   console.log('font_chinese loaded完成');});

        //获取access_token（请求授权:Authorization）
        getSessionId()
            .then(result => {
   

                this.sessionId = result;
                this.Authorization = "Bearer " + result;
                console.log('this.sessionId：' + this.sessionId);
                console.log('this.Authorization：' + this.Authorization);
            })
            .catch(error => {
   

                console.log('获取授权token失败 :' + error);
            });

        //加载等待条件
        this.uploadFlag = false;
    }


    /**
     *
     * 测试用例
     * 创建pdf文件,加水印，下载数据
     * @returns {Promise<void>}
     */
    async createPdf() {
   

        const pdfDoc = await PDFLib.PDFDocument.create();
        const timesRomanFont = await pdfDoc.embedFont(
            PDFLib.StandardFonts.TimesRoman
        );

        const page = pdfDoc.addPage();
        const {
   width, height} = page.getSize();
        const fontSize = 30;
        page.drawText("Learning with Salesforce Bolt !", {
   
            x: 50,
            y: height - 4 * fontSize,
            size: fontSize,
            font: timesRomanFont,
            color: PDFLib.rgb(0, 0.53, 0.71)
        });

        const pdfBytes = await pdfDoc.save(