Embed binary file in JSPdf

Viewed 104

I'm using JsPDF to export html content to a downloaded PDF. Consider the following example which takes some HTML content and outputs it to a downloaded PDF file using JsPdf

import React from "react";
import { render } from "react-dom";
import { renderToString } from "react-dom/server";
import Hello from "./Hello";
import jsPDF from "jspdf";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};
const colstyle = {
  width: "30%"
};
const tableStyle = {
  width: "100%"
};
const Prints = () => (
  <div>
    <h3>Time & Materials Statement of Work (SOW)</h3>
    <h4>General Information</h4>
    <table id="tab_customers" class="table table-striped" style={tableStyle}>
      <colgroup>
        <col span="1" style={colstyle} />
        <col span="1" style={colstyle} />
      </colgroup>
      <thead>
        <tr class="warning">
          <th>SOW Creation Date</th>
          <th>SOW Start Date</th>
          <th>Project</th>
          <th>Last Updated</th>
          <th>SOW End Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Dec 13, 2017</td>
          <td>Jan 1, 2018</td>
          <td>NM Connect - NMETNMCM</td>
          <td>Dec 13, 2017</td>
          <td>Dec 31, 2018</td>
        </tr>
      </tbody>
    </table>
    <p>
      This is a Time and Materials Statement of Work between Northwestern Mutual
      Life Insurance Company and Infosys with all general terms and conditions
      as described in the current Master Agreement and its related documents
    </p>
  </div>
);

const print = () => {
  const string = renderToString(<Prints />);
  const pdf = new jsPDF("p", "mm", "a4");
  pdf.fromHTML(string);
  pdf.save("pdf");
};

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {"\u2728"}</h2>
    <button onClick={print}>print</button>
  </div>
);

render(<App />, document.getElementById("root"));

My application has a much more complex solution, but this is to demonstrate the sort of content I am working with.

In my application, I have use cases where users are uploading attachments (which are saved into a MySQL database) and can be retrieved through an API. At some point in the journey, they can export to PDF some content. At some point, they may want to see their attachments inside the PDF.

Is it possible to embed a binary file inside the PDF document? If so, how can this be done? I've not come across any examples either on Stackoverflow or otherwise.

EDIT: When I refer to as 'embed a binary file', I mean to have the file be attached within the PDF. For example, in Word, you can include in the document an attachment to something else (a picture, Excel etc), and when the user double clicks on this attachment, it would open it. I'm looking to do something similar in PDF. Perhaps it would make sense to zip the binary file (if possible) before attaching it to the PDF.

I'm not sure what the limitations of Adobe are in this regard, but if this is possible, please do help.

EDIT2

I have seen this example of how to add images - is there a way to extend this so that it accepts any file types and not just images?

1 Answers

That is not possible with jsPDF, but I can inject file such as QR Code or video etc (top right) whilst the pdf is in my browsers control (see the left hand byline, No servers were harmed in the making of this demo) Remember the pdf is always within clients editor/viewer (a.k.a. browser) not in server, that is just html text.

enter image description here

jsPDF can only build the PDF using its repertoire of commands such as place text or images such as an HTML canvas. It does not have the access to system resources such as rich media video files.

In theory you could possibly extend its functionality to ask for an upload of image file to be used like the QRCode (a binary image), but it is unlikely it could inject a rich media video file by attachment or embedment, only like chromium Edge a reference to Flip video or YourTub. enter image description here

Equally, at present, it is unlikely to allow any embedment external to the pdf application, hence I had to use the viewer and editor after the blob was displayed to add those objects to the user local"temp".pdf before the user saves the file again, but why bother the file has already been saved by the PDF viewer.

Related