Code Monkey home page Code Monkey logo

pdfform.js's Introduction

pdfform.js

Fill out PDF forms in pure JavaScript, both in the browser or on the server.

pdfform.js can function with a slightly customized version of pdf.js. However, due to the size and scope of PDF.js (1600KB+), by default a built-in PDF library (called minipdf) is used.

The online demo demonstrates both (not recommended in actual production).

Installation

To use in a browser, download and serve either pdfform.minipdf.dist.js (minipdf, recommended) or pdfform.pdf_js.dist.js (pdf.js).

Alternatively, download/clone this repository and add minipdf.js and pdfform.js to your JavaScript files. You'll also need the pako library.

Usage

Simply call transform with the PDF file contents and the fields.

<!-- download from https://raw.githubusercontent.com/phihag/pdfform.js/dist/dist/pdfform.minipdf.dist.js -->
<script src="downloaded/pdfform.minipdf.dist.js"></script>
<script>
var pdf_buf = ...; // load PDF into an ArrayBuffer, for example via XHR (see demo)
var fields = {
    'fieldname': ['value for fieldname[0]', 'value for fieldname[1]'],
};
var out_buf = pdfform().transform(pdf_buf, fields);
// Do something with the resulting PDF file in out_buf
</script>

There is also a list_fields function which allows you to list all available fields and their types.

For more details, have a look at the demo and its JavaScript code.

pdfform.js's People

Contributors

marvinhagemeister avatar phihag avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pdfform.js's Issues

Invalid xref stream index

I am able to use many pdfs, but I have one that is giving me the error:

Invalid xref stream index: index says 1 objects, but space for 42

As the error suggests, there are 42 fields on the pdf form that should be fillable, but only the first one appears. That first field is a "Clear All" action that appears as a checkbox in the demo fields area. I can attach a link to the pdf in question if that helps. Thanks!

Error when opening the pdf file with Adobe Acrobat Reader

Hello,
I'm encountering a problem with the filled pdf file. it can't be opened with Adobe acrobat reader, and it shows me this error : There was an error opening this document. This file is damaged and could not be repaired.
Can you help me with that ?
Many thanks.

error in using npm package

I'm still new to javascript to bear with me, but when I use the npm package, imported like this
import * as pdfform from 'pdfform.js';
it get this error:

ERROR in ./node_modules/pdfform.js/dist/pdfform.minipdf.dist.js
Module not found: Error: Can't resolve './minipdf.js' in 'C:\Users\Jason\git\dev\globalflyte-webapp\node_modules\pdfform.js\dist'
ERROR in ./node_modules/pdfform.js/dist/pdfform.minipdf.dist.js
Module not found: Error: Can't resolve './minipdf_js.js' in 'C:\Users\Jason\git\dev\globalflyte-webapp\node_modules\pdfform.js\dist'

but everything is fixed when i just copy everything into /dist/ like this:
capture

I think this is either an error with the npm package or I'm doing something wrong.

Cannot get this to work

First of all, I love the demo. Thanks for that.

My goal: We have many fillable forms that we will be printing in our web app. One of them is the Buyer's Guide: https://www.ftc.gov/system/files/documents/plain-language/cfr_buyers_guides_english.pdf.

The user will not be uploading the document each time they want to print it. We want to save the PDF in our files and have the code find the PDF, fill it out, and then print it.
I ran into an error that I'd appreciate your help on a lot.

What I've done so far...

  1. run NPM
    image
  2. imported pdfform into the component.
    image
  3. I did not import the <script> into the index.html.
  4. created a function in the component mentioned in #2 above
    image
    This is the error I am receiving.
    image

doesn't `npm install` all required files

doing the following

  1. npm i --save pdfform.js
  2. node
  3. require('pdfform.js')
    gets the following results:
> require('pdfform.js')
Error: Cannot find module './libs/pako.min.js'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mateodelnorte/development/consensys/gridplus/token-contract-filler/node_modules/pdfform.js/pdfform.js:11:13)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)

why not just npm install --save pako and require it directly, instead of requiring this custom step?

var pako = require('./libs/pako.min.js');

Checkbox editing not workin

When you give a checkbox value of true, it doesn't get properly transformed by the library and just stays false. Does anyone know why that's happening?

incorrect header check

while upleading a pdf I am getting incorrect header check
Fill the details and download the pdf --> all fields are empty

stream must have data

Hi, I got an error when implement in my local laptop, anyone could help me?

pdfform.pdf_js.js:formatted:2911 Uncaught Error: stream must have data
at error (pdfform.pdf_js.js:formatted:2911)
at assert (pdfform.pdf_js.js:formatted:2922)
at PDFDocument.init (pdfform.pdf_js.js:formatted:4979)
at new PDFDocument (pdfform.pdf_js.js:formatted:4973)
at Object.pdf_js.parse (pdfform.pdf_js.js:formatted:37295)
at Object.transform (pdfform.pdf_js.js:formatted:37671)
at pdfform-test.php:9

source code:

<?php ?>

<script src="js/pdfform.pdf_js.js"></script>
<script>
    var pdf_buf = "template2.pdf" // load PDF into an ArrayBuffer, for example via XHR (see demo)
    var fields = {
        'name': 'test',
        'checkbox': "True"
    };
    var out_buf = pdfform().transform(pdf_buf, fields);
    // Do something with the resulting PDF file in out_buf
</script>

Support for Radio Buttons

Hi,

Do you have any support for checkboxes? When I click "Fill and Download" on the demo, all of the fields are numbered in order but it skips the checkboxes.

For an example you can see the pdf I emailed you yesterday.

Thank you!

Invalid xref stream index [with codesandbox]

Hi, thanks for your great work with this library.

I have a pdf with can be filled without problems on the official demo page.
If I load it via fetch, and convert it to an Array Buffer via resonse.arrayBuffer() I get the following exception:

Uncaught (in promise) Error: Invalid xref stream index: index says 1 objects, but space for 12

I created a csb to demonstrate my Problem:
https://codesandbox.io/s/youthful-swanson-jm9pm

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const pdf = require("./pdfform.minipdf.dist");

function App() {
  useEffect(() => {
    // both form.pdf and beratungsprotokoll.pdf are working
    // with the official demo at:
    // https://phihag.github.io/pdfform.js/docs/demo.html
    // loaded via fetch() however both produce
    // an xref error:
    // Invalid xref stream index: index says 1 objects, but space for 12
    fetch("https://jm9pm.csb.app/beratungsprotokoll.pdf")
      .then(res => res.arrayBuffer())
      .then(pdfArrayBuffer => {
        console.log(pdfArrayBuffer);
        console.log(pdf());
        console.log(pdf().list_fields(pdfArrayBuffer));
      });
  }, []);
  return <div>see console for status</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Example

Would you be able to put together an example usage for this?

Image support

It would be awesome if you could add support for inserting images, it would be useful for adding photos and signatures

Error filling out D&D 5e fillable character sheet

Hi,

pdfform.js is a fantastic utility! I got it to work satisfactorily on my project to generate a filled-out character sheet for Dungeons & Dragons fifth edition: https://github.com/drogoganor/dndcharactermaker

However, I did get an error with the fillable form which I had to work around. Here's the PDF: https://media.wizards.com/2016/dnd/downloads/5E_CharacterSheet_Fillable.pdf

The error was 'doc.acroForm.map.Fields.slice is not a function' on line 291 of pdfform.js, in the function 'function visit_acroform_fields(doc, callback)'. My solution was to make this check always false, which makes the function use the fallback logic which worked. I just thought you might want to know.

Thanks again!

Is there an option to flatten the pdf file?

I'm using pypdftk in an app but researching if it's possible to move everything into client side. One option i'm using is to flatten the file, turning the form into a regular non editable pdf. Does this project offer such an option?

Missing Trailer

Hi, when I load my pdf into the online demo, I get any error saying I have a missing trailer. I've found a trailer in my pdf. Any ideas?

Creating New Field

I was hoping you could point me in the right direction for a trick I'm trying to pull off.

I'm trying to duplicate and add an acroform field directly into the saving PDF. I assume it can be pulled off by parsing the PDF object array and duplicating an already created field into the stream. If you have any insight into how this could be accomplished, I would appreciate the advice.

I've successfully been able to modify the PDF acroform fields locations and names using your code but haven't been able to generate new field inputs.

Thanks again, and awesome project.

Error reading Field Dictionary

Hi Phillip,

I noticed an issue when reading fields from PDF where the Field Dictionary (which contains the fields name and value) is the parent of the Annotation Dictionary. The current code only works when the two Dictionaries are merged together. I'm not sure how this affects the actual form filling logic though.

PDF Types

I have been unable to use any of my own PDFs - built from scratch or already available. Are there parameters or pdf version requirements?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.