When I download the file watermark has been removed

Product:

Product Version: 71.2

Please give a brief summary of your issue:
watermark has been remove from file when we download

Please describe your issue and provide steps to reproduce it:
hi, I have added customize watermark in PDFTRON but when I try to download file from PDFTRON then watermark has been remove I don’t why
and please help in how to trigger download functionally in PDFTRON
(Think of this as an email subject)

(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:


Capture

Hello Harsh,

Thank you for contacting WebViewer Support.

I tried to reproduce the issue on the version you provided at v7.1.2 and was unsuccessful. Are there any errors logged that you can provide to help further troubleshoot?

These are the following steps I took:

  1. Download version 7.1 at PDFTron Systems Inc. | Documentation
  2. Modify viewing.js file (see guide below)
  3. run npm install and npm run start
  4. Launch the demo on viewing inside localhost:3000
  5. You should see the custom annotations, click the gear on top right and click download. The PDF has the custom watermarks.

Here is the guide you can follow to apply the watermark inside
sample/viewering/viewing.js file

Note that on v7.1.2,
instance.Core needs to be replaced with instance.docViewer
https://www.pdftron.com/api/web/7.3/index.html

You can also try the latest version to see if the problem persists.

Please let me know how this works for you.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

I have already add watermark in our PDFTRON when I try to download the file. then the file has been downloaded without watermark

Hi Harsh,

Here is link to a video to show you the steps I took to create a watermark and download it from WebViewer.

If the issue persists, please provide any custom code you are using or files to help reproduce on our end.

If possible, you can also update to the latest version to see if the problem persists.

Please let me know how this works for you.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

thank you for your help but I m passing file URL instead of file path and using " instance.loadDocument(URL, {})" in our code. is that making a watermark issue and sorry for my side my PDFTRON version is 7.1.2

Hi Harsh,

Here is link to a video using file url and ‘instance.loadDocument(URL, {})’ to load the document and create a watermark and download it from WebViewer 7.1.2.

Can you share the code that generates the watermark as well?

Is it possible for you to update WebViewer to the latest version 8.5 to see if the issue persists?

Please let me know how this works for you.

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.

import React, { useEffect, useRef, useState } from "react";
import WebViewer from "@pdftron/webviewer";
import "./App.css";
import { connect, useDispatch, useSelector } from "react-redux";
import { setInboxPassData } from "app/camunda_redux/redux/ducks/passDataInbox";

const SplitViewPdfViewer = (props) => {
    const dispatch = useDispatch();
    const viewer = useRef(null);
    const { flag } = props;
    let annotatId = props.anottId;
    const [instance, setInstance] = useState(null);
    let [loading, setLoading] = useState(true);
    // const {messageToPassInboxUrl} = useSelector(state => state.passDataInbox);
    const messageToPassInboxUrl = props.fileUrl;

    async function loadPDF() {
        try {
            if (instance != null) {
                const { docViewer } = instance;

                docViewer.setWatermark({
                    // Draw diagonal watermark in middle of the document
                    diagonal: {
                        fontSize: 35, // or even smaller size
                        fontFamily: "sans-serif",
                        color: "#5a5ad6",
                        opacity: 40, // from 0 to 100
                        text: `${sessionStorage.getItem("pklDirectrate")}`,
                    },

                    // Draw header watermark
                    header: {
                        fontSize: 10,
                        fontFamily: "sans-serif",
                        color: "red",
                        opacity: 70,
                    },
                });

                const URL =
                    messageToPassInboxUrl === ""
                        ? process.env.REACT_APP_PDF_SAMPLE_URL +
                        "?token=" +
                        sessionStorage.getItem("jwt_token")
                        : messageToPassInboxUrl;
                instance.loadDocument(URL, {});
            } else {
                await Promise.all([
                    WebViewer(
                        {
                            path: `${process.env.PUBLIC_URL + "/webviewer/lib"}`,
                            initialDoc:
                                process.env.REACT_APP_PDF_SAMPLE_URL +
                                "?token=" +
                                sessionStorage.getItem("jwt_token"),
                            fullAPI: true,
                            enableRedaction: true,
                            backendType: "ems",
                        },
                        viewer.current
                    ).then((instance) => {


                        setInstance(instance);
                        const { annotManager, docViewer, Tools } = instance;

                        docViewer.on('documentLoaded', function () {
                            instance.setZoomLevel('100%')
                        });

                        console.log(instance.getZoomLevel())

                        docViewer.setWatermark({
                            // Draw diagonal watermark in middle of the document
                            diagonal: {
                                fontSize: 35, // or even smaller size
                                fontFamily: "sans-serif",
                                color: "#5a5ad6",
                                opacity: 40, // from 0 to 100
                                text: `${sessionStorage.getItem("pklDirectrate")}`,
                            },

                            // Draw header watermark
                            header: {
                                fontSize: 10,
                                fontFamily: "sans-serif",
                                color: "red",
                                opacity: 70,
                            },
                        });

                        let data = sessionStorage.getItem("username");
                        console.log(data);
                        annotManager.setCurrentUser(data);
                        annotManager.setIsAdminUser(true);

                        const fullScreen = {
                            type: "actionButton",
                            img: '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8v-2a2 2 0 0 1 2 -2h2" /><path d="M4 16v2a2 2 0 0 0 2 2h2" /><path d="M16 4h2a2 2 0 0 1 2 2v2" /><path d="M16 20h2a2 2 0 0 0 2 -2v-2" /></svg>',
                            title: "FullScreen",
                            onClick: () => {
                                instance.toggleFullScreen(true);
                            },
                            dataElement: "fullscreen",
                        };
                        props.pdfLoads(true);
                    }),
                ]);
            }
        } catch (e) {
            console.log(e);
        }
    }

    useEffect(() => {
        loadPDF();
    }, [messageToPassInboxUrl, instance]);

    // Make a GET request to get XFDF string
    var loadxfdfStrings = function (documentId) {
        return props.getAnnotation(documentId);
    };

    return (
        <div className="App">
            <div
                id="pdfV"
                className="webviewer"
                ref={viewer}
                style={{ height: "calc(100vh - 120px)" }}
            ></div>
        </div>
    );
};

function mapStateToProps(state) {
    return {
        props: state.props,
        theme: state.theme,
    };
}

export default connect(mapStateToProps, {})(SplitViewPdfViewer);

here is my pdftron code

Hi Harsh,

Thank you for providing custom code that is implementing WebViewer. Due to the complexity and props needed for us to run this component, we are unable to use this code to reproduce the issue.

Can you please share a minimal sample to reproduce the bug? Via a small project/repository that demonstrates the Watermark bug upon download?

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.