Enable users to choose where put an object on pdf document in PHP

I'm looking for a tool to use in PHP and jQuery that give the possibility to the user to choose where put "something" into a PDF file.

Let me explain better. I would a tool that open a preview of a PDF file and the user can choose the exact point (coordinates) where add a text clicking the point with the mouse in the preview.

In the image attached you can view what I mean. The blue square is the text to be added, so the user can see exactly where it will be added with the correct sizes.

Do you know if exists something like this?

alt text

azimidev

3 years ago

Level 55

Yes, you can use a package called "FPDF" which allows you to generate PDF files dynamically in PHP. You can use jQuery to get the coordinates of where the user clicks on the preview and then use that information to place the text at the desired location in the PDF file using FPDF. Another package called "TCPDF" is also similar and also provides the ability to dynamically generate PDF files in PHP.

iluca89

3 years ago

Level 1

@azimidev thank you! I already use FPDF and I know how to add text in specific coordinates. I have difficulties on find a way to let see the preview and let to the user the possibilities to choose a point. Any ideas/examples?

azimidev

3 years ago

Level 55

@iluca89 you will need to write some code that generates the PDF on the fly and displays it in a way that the user can interact with it. One way to do this would be to use JavaScript and HTML to create an interactive preview.

<!DOCTYPE html>
<html>
<head>
  <style>
    #pdf-container {
      border: 1px solid black;
      width: 500px;
      height: 500px;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div id="pdf-container">
    <!-- Preview of the PDF document will be displayed here -->
  </div>
  <button id="generate-pdf-button">Generate PDF</button>
  <script>
    const pdfContainer = document.getElementById("pdf-container");
    const generatePdfButton = document.getElementById("generate-pdf-button");

    // Generate the PDF when the button is clicked
    generatePdfButton.addEventListener("click", function() {
      // Use FPDF to generate the PDF and display it in the pdfContainer element
      // ...

      // Add a click listener to the pdfContainer element so the user can choose a point
      pdfContainer.addEventListener("click", function(event) {
        console.log("User clicked at x: " + event.clientX + ", y: " + event.clientY);
      });
    });
  </script>
</body>
</html>

when the user clicks the "Generate PDF" button, the PDF is generated using FPDF and displayed in the pdfContainer element. The user can then click anywhere within the pdfContainer element to choose a specific point, and the coordinates of the click will be logged to the console.

You can modify this example to fit your needs, for example by using the coordinates of the user's click to place text or other elements in the PDF.

1 like

iluca89

3 years ago

Level 1

@azimidev thank you! Can I do the same thing with laravel?

iluca89

3 years ago

Level 1

@azimidev Hello! Do you some example code to view the PDF into the div?

I tried this: <div id="pdf-container"> <object data="{{ url('storage/'.$file->name) }}" type="application/pdf"> </object> </div> But if the user clicks into the object, the coordinates are not returned.

azimidev

3 years ago

Level 55

@iluca89

<!DOCTYPE html>
<html>
<head>
  <script src="path/to/pdf.js/build/pdf.js"></script>
  <style>
    #pdf-container {
      width: 100%;
      height: 100%;
      position: relative;
    }

    #pdf-viewer {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div id="pdf-container">
    <div id="pdf-viewer"></div>
  </div>
  <script>
    // Set the worker source for PDF.js
    pdfjsLib.GlobalWorkerOptions.workerSrc = "path/to/pdf.js/build/pdf.worker.js";

    // Load the PDF file
    const url = "path/to/your/pdf-file.pdf";
    const pdfViewerContainer = document.getElementById("pdf-viewer");

    pdfjsLib.getDocument(url).promise.then((pdf) => {
      // Render the first page of the PDF
      pdf.getPage(1).then((page) => {
        const scale = 1.5;
        const viewport = page.getViewport({ scale });

        // Prepare the canvas and rendering context
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        canvas.width = viewport.width;
        canvas.height = viewport.height;

        // Add the canvas to the container
        pdfViewerContainer.appendChild(canvas);

        // Render the page
        const renderContext = {
          canvasContext: context,
          viewport,
        };
        page.render(renderContext);

        // Listen for clicks on the canvas
        canvas.addEventListener("click", (event) => {
          const rect = canvas.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;
          console.log(`Clicked coordinates: x=${x}, y=${y}`);
        });
      });
    });
  </script>
</body>
</html>

2 likes

Please or to participate in this conversation.