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(