Salesforce平台下服务器图片转带水印PDF及受限预览功能需求

Hey there! Let's walk through how to build this functionality on Salesforce using JavaScript and jQuery, covering both the core conversion and the enhanced preview controls you want.

1. Core Implementation: Image to Watermarked PDF #

Step 1: Fetch Images from Server #

First, use jQuery's $.ajax to pull the image from your Salesforce server (internal resources like static resources or custom Apex endpoints work best to avoid CORS issues). Add user feedback for failures, like Salesforce toast notifications, to keep the experience smooth.

$('#convertBtn').on('click', function() {
  $.ajax({
    url: '/resource/YourTargetImage', // Replace with your image's Salesforce URL
    xhrFields: { responseType: 'blob' },
    success: function(blob) {
      const imgUrl = URL.createObjectURL(blob);
      generateWatermarkedPDF(imgUrl);
    },
    error: function(err) {
      console.error('Failed to load image:', err);
      // Example: Trigger Salesforce toast notification here
      sforce.one.showToast({ title: 'Error', message: 'Image fetch failed', type: 'error' });
    }
  });
});

Step 2: Generate PDF with Watermark #

Use the open-source jsPDF library for client-side PDF generation—it’s lightweight and perfect for this use case. You can add text watermarks directly, or use html2canvas if you need custom HTML-based watermarks (like logos or styled text).

function generateWatermarkedPDF(imgUrl) {
  const doc = new jsPDF('portrait', 'px', 'a4');
  
  const img = new Image();
  img.onload = function() {
    const pageWidth = doc.internal.pageSize.getWidth();
    const pageHeight = doc.internal.pageSize.getHeight();
    // Scale image to fit the page without distortion
    const scale = Math.min(pageWidth / img.width, pageHeight / img.height);
    const scaledWidth = img.width * scale;
    const scaledHeight = img.height * scale;

    // Add image to center of the PDF page
    doc.addImage(img, 'PNG', (pageWidth - scaledWidth)/2, (pageHeight - scaledHeight)/2, scaledWidth, scaledHeight);
    
    // Add semi-transparent text watermark
    doc.setFillColor(120, 120, 120, 80); // RGBA value, last digit controls opacity
    doc.setFontSize(45);
    doc.text('CONFIDENTIAL', pageWidth/2, pageHeight/2, { align: 'center', angle: 45 });
    
    // Pass the generated PDF blob to preview function
    previewRestrictedPDF(doc.output('blob'));
    // Optional: Let users download the PDF directly
    // doc.save('watermarked-document.pdf');
  };
  img.src = imgUrl;
}

2. Restricted PDF Preview (Disable Selection/Copy) #

To block users from selecting or copying preview content, here are two reliable approaches:

Option A: PDF.js with Custom Rendering #

Mozilla’s open-source PDF.js lets you fully control the preview experience. Disable the text layer to prevent selection, and tweak settings to lock down interactions.

function previewRestrictedPDF(blob) {
  const previewContainer = $('#pdfPreview');
  previewContainer.empty();
  
  const pdfUrl = URL.createObjectURL(blob);
  // Initialize PDF viewer with restricted settings
  const viewer = new PDFViewer({
    container: previewContainer[0],
    textLayerMode: 0, // Turn off text layer to disable selection
    enableScripting: false,
    disableContextMenu: true,
  });

  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  loadingTask.promise.then(function(pdf) {
    viewer.setDocument(pdf);
  });
}

Note: Host the PDF.js library (viewer.js + viewer.css) as Salesforce static resources and reference them in your Visualforce page/Aura component.

Option B: Embed with CSS Restrictions #

For a simpler setup, use an embed tag combined with CSS to block selection. While less bulletproof across all browsers, it’s quick to implement:

<div id="pdfPreview" style="user-select: none; -webkit-user-select: none; -moz-user-select: none;">
  <embed id="pdfEmbed" type="application/pdf" width="100%" height="600px" />
</div>

function previewRestrictedPDF(blob) {
  $('#pdfEmbed').attr('src', URL.createObjectURL(blob));
}

3. Salesforce-Specific Tips #

• Static Resources: Host jsPDF, html2canvas, and PDF.js as static resources to ensure reliable loading in your Salesforce environment.
• Permission Checks: If pulling images from custom objects, use an Apex controller to serve the images with proper sharing settings to avoid access errors.
• Client-Side Advantage: Doing all processing client-side avoids hitting Salesforce Apex governor limits, which is a huge win for scalability.

4. Pricing Options (Flexible for Your Budget) #

Since you’re open to all price points, here’s what’s available:

• Free/Open Source: Use jsPDF + PDF.js (100% free, requires development time to set up and customize).
• Low-Cost AppExchange Plugins: Look for PDF generation tools on the Salesforce AppExchange (typically $10-$50/user/month) that include watermarking and restricted preview out of the box.
• Custom Enterprise Development: Hire a Salesforce developer to build a fully tailored solution (costs $100-$200/hour on average). Great if you need deep integration with your Salesforce data or unique watermark rules.

内容的提问来源于stack exchange，提问作者Vishnu Kumar