Build a Web Page to Scan Documents to PDF

If you are developing a web application that requires the capability to deal with different digital file formats, chances are PDF will be a must-have file format. Converting pages of text and graphics to PDF results in a compressed and visually clear file that can be read on a PC or Mac, typically using Adobe Reader.

To acquire documents from a scanner, your web application needs to be able to talk with your scanner via some scanning protocols. This leaves you with two options:

  • Spend a lot of time and effort to figure out the TWAIN standard
  • Use an available off-the-shelf third-party SDK

Considering the ease and convenience of using third-party SDK compared to the immense time and steep learning curve of studying a new protocol, opting for an SDK is a recommended solution. An SDK also makes sense if you wish to free up your time and remain focused on your project rather than diverting your attention toward a task that could add weeks or months to your project timeline.

Dynamic Web TWAIN is the industry-leading TWAIN document scanning SDK on the market. It is used by countless Fortune 500 companies including IBM, Lockheed Martin, Intel, Samsung, NASA, Disney, Mercedes Benz, and more. Dynamic Web TWAIN is known for it’s ease of integration and it’s user-friendliness. In 5 minutes or less, you can build a web page that will scan documents to a PDF format.

In this tutorial, we show you step by step how to build a simple HTML page to scan documents and save them as a PDF file.

There are four simple steps:

  1. Start a Web Application
  2. Add Dynamic Web TWAIN to the HTML Page
  3. Use Dynamic Web TWAIN to Scan or Load Images
  4. Save Images as a PDF file

Step 1: Start a Web Application

Download the free Dynamic Web TWAIN 30-day trial.

2019-08-27 16_09_48-Dynamic Web TWAIN Download

After your installation, you can find it by default at C: > Program Files > (x86) > DynamsoftDynamic Web TWAIN SDK 15.1 Trial.

  1. Copy the Dynamsoft’s Resources folder to your project

The Resources folder can normally be copied from
C:\Program Files (x86)\Dynamsoft\Dynamic Web TWAIN SDK {Version Number} {Trial}\

ResourcesFolder

Notice there are three folders:

  • Documents — Help Documents and a Developer’s Guide 
  • Resources — SDK files necessary to build a scanning web page
  • Samples — Dynamic Web TWAIN samples
    Create an empty HTML page

Please put the empty html page together with the Resources folder, as shown below:

ResourcesAndHTML

2. Add Dynamic Web TWAIN to the HTML Page

2.1 – Include the two Dynamsoft’s JS files in the <head> tag.

 

<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script> 
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>

2.2. Add Dynamic Web TWAIN container to the <body> tag.

<div id="dwtcontrolContainer" ></div>

Note: " dwtcontrolContainer" is the default id for the div. You can change it in the dynamsoft.webtwain.config.js if necessary.

Step 2: Use Dynamic Web TWAIN to Scan or Load Images

Add Scan and Load buttons to the page:

<input type="button" value="Scan" onclick="AcquireImage();" />

<input type="button" value="Load" onclick="LoadImage();" >

And add the implementation of function AcquireImage() and LoadImage(). Notice how LoadImage() handles success and failure with callback functions OnSuccess() and OnFailure() :

        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSource();
                DWObject.OpenSource();
                DWObject.IfDisableSourceAfterAcquire = true;	// Scanner source will be disabled/closed automatically after the scan.
                DWObject.AcquireImage();
            }
        }

        //Callback functions for async APIs
        function OnSuccess() {
            console.log('successful');
        }

        function OnFailure(errorCode, errorString) {
            alert(errorString);
        }

        function LoadImage() {
            if (DWObject) {
                DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
                DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
            }
        } 

Step 4: Save Images as a PDF file

We still have 1 minute left, don’t we? Now we have two options to get documents loaded into Dynamic Web TWAIN:

      • Scan documents from a scanner (AcquireImage());
      • Or load hard disk documents (LoadImage()).

It’s time to add a save button to the web page:

<input type="button" value="Save" onclick="SaveWithFileDialog();" />

Add the logic of saving documents to PDF:

        function SaveWithFileDialog() {
            if (DWObject) {
                if (DWObject.HowManyImagesInBuffer &amp;amp;amp;amp;amp;gt; 0) {
                    DWObject.IfShowFileDialog = true;
                    DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
                }
            }
        }

Now, save the file.

That’s it. Congratulations. You have just built a web page in around 5 minutes that can scan or load documents and save them as a PDF file.

You can open scan2pdf.html in a browser and test it out.

You can either load a local document or scan documents into your web page. Let’s try scanning. This is how the page looks like when Scan button is clicked:

Dynamic Web TWAIN scan page

Please note that only TWAIN compatible scanners will be listed in the Select Source dialog. If you don’t have a real scanner at hand, you can install a virtual scanner for the testing, which is what I did. If you do have a scanner, but it doesn’t show up in the list, please check this article for a solution.

After a sample page is scanned, it looks something like this:
Dynamic Web TWAIN scan page after scanning

And yes, you can save it as a PDF file by clicking Save button. Here’s the entire code example:

<html>
<head>
    <title>Hello World</title>
    <script src="Resources/dynamsoft.webtwain.initiate.js"> </script>
    <script src="Resources/dynamsoft.webtwain.config.js"> </script>
</head>
<body>
    <input type="button" value="Scan" onclick="AcquireImage();" />
    <input type="button" value="Load" onclick="LoadImage();" />
    <input type="button" value="Save" onclick="SaveWithFileDialog();"/>

    <div id="dwtcontrolContainer"></div>
    <script type="text/javascript">
        var DWObject;
        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
        }
        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSource(function () {
                    DWObject.OpenSource();
                    DWObject.AcquireImage();
                },
                function () {console.log("SelectSource failed!"); });
            }
        }

        function LoadImage() {
            if (DWObject) {
                DWObject.IfShowFileDialog = true; // Open the system's file dialog to load image
                DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure); // Load images in all supported formats (.bmp, .jpg, .tif, .png, .pdf). OnSuccess or OnFailure will be called after the operation
            }
        }        

        function OnSuccess() {
            console.log('successful');
        }

        function OnFailure(errorCode, errorString) {
            alert(errorString);
        }

        function SaveWithFileDialog() {
            if (DWObject) {
                if (DWObject.HowManyImagesInBuffer > 0) {
                    DWObject.IfShowFileDialog = true;
                    DWObject.SaveAllAsPDF("DynamicWebTWAIN.pdf", OnSuccess, OnFailure);
                }
            }
        }
    </script>
</body>
</html>

One Step Further

The example above is simple and functions well. But sometimes, you may like to take things a step further. For example, how about automatically saving documents as a PDF without having to manually click the save button?

With Dynamic Web TWAIN’s event mechanism, it’s actually fairly easy to do.

Dynamic Web TWAIN offers a number of events for users to subscribe to. Events are triggered when certain trigger points are reached. For example, we have an OnMouseClick event for mouse clicking, an OnPostTransfer event for the end of transferring one image, etc.

So at the end of function Dynamsoft_OnReady(), simply add:

            if (DWObject) {
                DWObject.RegisterEvent('OnPostAllTransfers', SaveWithFileDialog);
            }

This will do the job.

Conclusion

This is a simple example to show you how to use Dynamic Web TWAIN to scan documents and save them as a PDF file. If you are interested in learning more about how Dynamic Web TWAIN can help your project, I would recommend you read the developer’s guide.

Let me know your thoughts and questions in the comments.

P.S. if you need to save to other image formats, such as BMP, JPEG, TIFF, you can find the exact code sample in the Dynamic Web TWAIN trial package.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com