PRINTING ELECTRONIC DOCUMENTS FROM LARGE HTML SCREENS

To print electronic documents from large HTML screens, a user interface component rendered by a computer application on a display device is identified. The user interface component is divided into multiple sub-components. Each sub-component is converted into a respective canvas component resulting in multiple canvas components. A size of each sub-component is selected such that a time taken to convert each sub-component into the respective canvas component is less than a threshold timeout associated with the computer application that rendered the user interface component. The multiple canvas components are converted into a portable document format (PDF) document. The PDF document is displayed on the display device.

TECHNICAL FIELD

The present disclosure relates to computer-implemented methods, software and systems for printing electronic documents, for example, documents in portable document format (PDF).

BACKGROUND

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. Computer applications developed using HTML5 are adaptable to and executable on a range of browsers and devices including, for example, smart phones, tablets, and desktops. In some instances, a user may want to export or print a user interface rendered by a computer application executing HTML5 into an electronic document, for example, a PDF document. To do so, the computer application, that displays the user interface, converts the user interface into the electronic document. If the user interface is resource intensive, for example, large in size, then the time that the computer application requires to convert the user interface into the electronic document can be greater than a threshold timeout for the computer application. In such instances, the computer application can fail to convert the user interface into the electronic document, and display an error message.

SUMMARY

This specification describes technologies relating to printing electronic documents from large HTML screens.

Certain aspects of the subject matter described here can be implemented as a computer-implemented method. A user interface component rendered by a computer application on a display device is identified. The user interface component is divided into multiple sub-components. Each sub-component is converted into a respective canvas component resulting in multiple canvas components. A size of each sub-component is selected such that a time taken to convert each sub-component into the respective canvas component is less than a threshold timeout associated with the computer application that rendered the user interface component. The multiple canvas components are converted into a portable document format (PDF) document. The PDF document is displayed on the display device.

An aspect combinable with any other aspect includes the following features. To convert the multiple canvas components into the PDF document, the multiple canvas components are merged into a single merged canvas component. The single merged canvas component is converted into the PDF document.

An aspect combinable with any other aspect includes the following features. To convert the multiple canvas components into the PDF document, each canvas sub-component is converted into a respective PDF document portion resulting in multiple PDF documents, each of which is a portion of the PDF document. The multiple PDF documents are merged into the PDF document.

An aspect combinable with any other aspect includes the following features. A size of each canvas sub-component is selected based on a threshold size of a canvas sub-component that the computer application that rendered the user interface can support.

An aspect combinable with any other aspect includes the following features. Input including a number of the multiple sub-components into which the user interface is to be divided is received. To divide the user interface component into the multiple sub-components, the user interface component is divided into at least the number of the multiple sub-components specified in the input.

An aspect combinable with any other aspect includes the following features. To divide the user interface component into the multiple sub-components, the user interface component is divided into multiple horizontal or vertical sub-components.

An aspect combinable with any other aspect includes the following features. User input is received to convert the user interface component into the PDF document.

DETAILED DESCRIPTION

When a computer application, for example, a web browser, executes a computer program, for example, loads a webpage on a display device of a computer system, the computer application parses all of the HTML resources that form the webpage before displaying the webpage on the display device. Sometimes, the HTML resources include links to other files, for example, a CSS file, a JavaScript file or an in-line script (i.e., JavaScript code in the HTML itself). When the computer application encounters such a link, the computer application pauses the HTML execution to perform a non-JavaScript operation, for example, to fetch and execute the code. Doing so slows down the process of loading the webpage. Such execution of the HTML resources, whereby execution of additional JavaScript must wait until a non-JavaScript operation is completed, is called a blocking execution. If the time taken to execute the non-JavaScript operation exceeds a threshold timeout associated with the computer application, for example, a web browser timeout, then the computer application fails and, sometimes, displays an error message.

This disclosure relates to operations implemented by a computer application executed by a computer system to convert large HTML screens into electronic documents, for example, PDF documents. In a client-server environment, PDF printing (or PDF export) functionality of very large HTML screens at the client side is not considered scalable and is usually avoided. While providing such functionality at the backend layer may be an option, doing so introduces additional back end components and is not always logistically feasible for isomorphic client-side user interfaces. An isomorphic application is one whose code, for example, JavaScript, can run both in the server and the client. In particular, developing back end components for all known backend environments is a challenge, in particular, if the user interface (UI) element has complex graphical elements like scalable Vector graphics (SVG). Consequently, providing the PDF printing functionality at the client side becomes unavoidable.

However, providing the PDF printing functionality at the client side can also be challenging due to the following constraints. First, the UI component needs to be printed with complete data without any lazy loading of data or UI component. Lazy loading is the practice of delaying load or initialization of resources or objects until they are actually needed to improve performance and save system resources. Second, UI component rendering and other underlying steps like HTML to canvas conversion, and then canvas to PDF conversion are synchronous operations that can block the main thread of JavaScript execution on the client side, as JavaScript is single threaded. By single threaded, it is meant that JavaScript has one call stack and one memory heap. It executes code in order and must finish executing a piece of coding before moving on to the next. Thus if a function takes a while to execute or has to wait on something, such wait freezes all of the operations of the JavaScript execution. Third, certain computer applications, for example, web browsers, have limitations on the maximum HTML canvas object size. Thus, even if the UI component can be printed to PDF in a single step without exceeding the threshold timeout of the web browser, the web browser may not be able to support the size of the HTML canvas object to which the UI component is converted.

This disclosure describes a non-blocking algorithm for electronic document printing, for example, PDF printing, of very large HTML screens that overcome the issues described above. Briefly, a computer system identifies a user interface component rendered by a computer application on a display device. The computer system divides the user interface component into multiple sub-components. In the context of this disclosure, component refers to the whole, main HTML canvas, and sub-components refer to the blocks to which the whole, main HTML canvas is split. The computer system converts each sub-component into a respective canvas component resulting in multiple canvas components. A size of each sub-component is selected such that the time taken to convert each sub-component into the respective canvas component is less than a threshold timeout associated with the computer application that rendered the user interface. The computer system converts the multiple canvas components into a PDF document. The computer system displays the PDF document on the display device.

By implementing the techniques described in this disclosure, the issue of the web browser getting timed out because the main JavaScript thread waits on one main task which exceeds the defined threshold for the web browser can be avoided. The techniques described in this disclosure can also be implemented to overcome the issue of the canvas size exceeding browsers supported limits.

FIG.1is an example of a flow diagram of a method of printing electronic documents from large HTML screens. In some implementations, the flow diagram can be implemented by a computer system100that includes one or more processors102, and a computer readable medium104operatively connected to the one or more processors102and the storing computer instructions executable by the one or more processors102to implement the flow diagram and other processes. In some implementations, the computer system100is a client-side computer system operatively connected to a backend server (not shown). All operations associated with the flow diagram are implemented on the client side by the computer system100without needing any assistance or resources from the backend server to implement the flow diagram.

To initiate the print process, a user provides an input to the computer system100. For example, the user can select an object included in a user interface displayed in a display device. The selection of the object instructs the computer system102to initiate the print process. Alternatively or in addition, the computer system100can initiate the print process as part of a larger process and without a specific input, for example, from the user. In any of these manners, at152, the computer system100initiates the print process.

At154, the computer system100identifies individual sub-components that collectively form the user interface component rendered by the computer application on the display device. For example, the computer system100identifies the HTML screen rendered by the web browser on the display device. In the context of this application, a component or a user interface component encompasses typographies, forms, buttons, navigation and other resources that are executed by the computer application, for example, the web browser, to render the user interface component, i.e., the HTML screen, on the display device. In some implementations, each component is defined in a component.JS file in the same folder as the default file, for example, index.html, that is executed when a webpage is loaded in a web browser.

At156, the computer system100executes a loop, which includes the following steps. At158, the computer system100creates a data set needed to render an individual sub-component. In particular, the computer system100does not fetch all the data needed to render the entire user interface component, but rather fetches only the data needed to render the identified sub-component. For example, if the HTML canvas to be printed is a table with a header, columns, multiple rows and a footer, then the entire table is the component. The table can be divided into, for example, ten sub-components, each including ten rows, one sub-component including the header and another including the footer. In this example, to render one sub-component, the computer system100can fetch only the data needed to render that sub-component rather and not fetch all the data needed to render the entire table. The data can be available on the client side or, in some implementations, can be fetched from the backend to which the client is operatively coupled.

The identified sub-component is smaller in size and includes fewer resources compared to the user interface component as a whole. To identify the sub-component, the computer system100divides the user interface component into multiple parts. The size of each part is selected such that the time taken to convert the resources (i.e., contents) of each part into a respective canvas component (described below) is less than a threshold timeout associated with the computer application that rendered the user interface component. In addition, the size of each part is selected such that the time taken to convert each part into the respective canvas component is less than a time taken to convert the whole user interface component into a single canvas component. By doing so, the computer system100is able to convert each identified sub-component into a respective canvas component before exceeding the threshold timeout associated with the computer application, for example, the web browser. Consequently, the synchronous JavaScript execution to print the HTML screen into the electronic document does not fail.

At160, the computer system100renders the HTML sub-component. Rendering the HTML sub-component means creating the HTML markup elements corresponding to the sub-component. At164, the computer system100converts the HTML sub-component into a respective canvas component. In some implementations, the computer system100executes a software module (i.e., a collection of software code) to create the data set (step158) and render the sub-component (step160) and another, separate software module to convert the HTML sub-component into a canvas component. For example, the other, separate software module is an HTML canvas element used to draw graphics on the fly via scripting, usually JavaScript. In such implementations, the computer system100passes, at step162, the HTML component rendered by executing the software module to the other, separate software module for conversion into the canvas component. The computer system100executes the loop156until all the sub-components that collectively form the user interface component to be converted into the electronic document have been identified and each converted into a respective canvas component.

At166, the computer system100merges all of the canvas components into a single merged canvas component. In some implementations, the computer system100can execute the JavaScript code presented below to merge multiple canvas components into a single merged canvas component. The JavaScript code presented below is executable for sub-components generated by vertically slicing the user interface component. The JavaScript code can be modified and applied to sub-components generated by horizontally or otherwise slicing the user interface component.

The single merged canvas component is just one component that can then be converted into an electronic document, for example, a PDF document, in one step by an electronic document processor190. The electronic document processor190can be a computer application separate from the computer application that rendered the user interface component but be executed by same the computer system100. In some implementations, the electronic document processor190can be implemented as an add-on or plug-in functionality of the web browser.

At168, the computer system100passes the single merged canvas component to the electronic document processor190. At170, the electronic document processor190converts the single merged canvas component into a single electronic document, for example, a PDF document. After conversion, the electronic document processor190returns the single electronic document to the computer system100. Then, the computer system100displays the single electronic document in the display device.

FIG.2is a flow chart of an example of a process200of printing electronic documents from large HTML, screens. In some implementations, the process200is executed by the computer system100. At202, the computer system100identifies a user interface component rendered by a computer application on a display device. At204, the computer system100divides the user interface into multiple sub-components. At206, the computer system100converts each sub-component into a respective canvas component resulting in multiple canvas components. At208, the computer system100merges all canvas sub-components into a single merged canvas component. At210, the computer system100converts the single merged canvas component into an electronic document, for example, a PDF document. For example, the computer system100passes the single merged canvas component to an electronic document processor190, which converts the single merged canvas component into the PDF document. At212, the computer system100displays the PDF document on the display device.

In the implementation described with reference toFIGS.1and2, the computer system100merged multiple canvas components into a single canvas component. In some instances, the size of the single canvas component may exceed permissible limits, for example, maximum dimensions or area, associated with the computer application that rendered the user interface component, for example, the web browser. In such instances, the single canvas component is rendered unusable, and drawing commands will no longer work. The flow diagram and the flowchart described with reference toFIGS.3and4, respectively, can be implemented to overcome this drawback.

FIG.3is an example of a flow diagram of another method of printing electronic documents from large HTML screens. Similar to step152inFIG.1, to initiate the print process, a user provides an input to the computer system100. For example, the user can select an object included in a user interface displayed in a display device, the selection of which instruct the computer system102initiate the print process. Alternatively or in addition, the computer system100can initiate the print process as part of a larger process and without a specific input, for example, from the user. In any of these manners, at302, the computer system100initiates the print process.

Similar to step154inFIG.1, at304, the computer system100identifies individual sub-components that collectively form the user interface component rendered by the computer application on the display device. For example, the computer system100identifies the HTML screen rendered by the web browser on the display device.

At306, the computer system100executes a loop, which includes the following steps. Similar to step158inFIG.1, at308, the computer system100creates a data set needed to render an individual sub-component. As described above, the computer system100does not fetch all the data needed to render the entire user interface component, but rather fetches only the data needed to render the identified sub-component.

As described above, the identified sub-component is smaller in size and includes fewer resources compared to the user interface component as a whole. To identify the sub-component, the computer system100divides the user interface component into multiple parts. The size of each part is selected such that the time taken to convert the resources (i.e., contents) of each part into a respective canvas component is less than a threshold timeout associated with the computer application that rendered the user interface component. In addition, the size of each part is selected such that the time taken to convert each part into the respective canvas component is less than a time taken to convert the whole user interface component into a single canvas component. Moreover, the size of each part is selected such that the size of the respective canvas component is less than permissible limits associated with the computer application that rendered the user interface component. By doing so, the computer system100is able to convert each identified sub-component into a respective canvas component before exceeding the threshold timeout associated with the computer application, for example, the web browser, and also while ensuring that the resulting canvas component is usable for post-processing, i.e., electronic document conversion.

Similar to step160inFIG.1, at310, the computer system100renders the HTML sub-component. Similar to step164inFIG.1, at314, the computer system100converts the HTML sub-component into a respective canvas component. As described above, the computer system100executes a software module (i.e., a collection of software code) to create the data set (step308) and render the sub-component (step310) and another, separate software module to convert the HTML sub-component into a canvas component. For example, the other, separate software module is an HTML canvas element used to draw graphics on the fly via scripting, usually JavaScript. In such implementations, the computer system100passes, at step312, the HTML component rendered by executing the software module to the other, separate software module for conversion into the canvas component. In this implementation described with reference toFIGS.3and4, the canvas component into which the HTML component is converted satisfies the permissible limits, for example, maximum dimensions or area, associated with the computer application that renders the user interface component. Consequently, the canvas component remains usable.

At this juncture, as described with reference toFIGS.1and2, the computer system100repeated the steps to convert all HTML sub-components into respective canvas components and merged all the canvas components into a single merged canvas component. Instead, in the implementation described with reference toFIGS.3and4, at316, the computer system100passes each canvas sub-component to the electronic document processor190for conversion into a respective electronic document portion. Each respective electronic document portion is a portion of the PDF document formed by converting the entirety of the user interface component. At318, the electronic document processor190converts the canvas sub-component into the electronic document portion. The computer system100continues to execute the loop306until each individual sub-component identified at step304has been converted into a respective electronic document portion at step318. As the electronic document processor190generates the electronic document portions, it merges those portions into the electronic document. After merging all the electronic document portions into the electronic document, at320, the electronic document processor190returns the single electronic document to the computer system100. Then, the computer system100displays the single electronic document in the display device.

FIG.4is a flow chart of an example of a process400of printing electronic documents from large HTML, screens. In some implementations, the process400is executed by the computer system100. At402, the computer system100identifies a user interface component rendered by a computer application on a display device. At404, the computer system100divides the user interface into multiple sub-components. At406, the computer system100converts each sub-component into a respective canvas component resulting in multiple canvas components. At408, the computer system100converts each canvas component into a respective PDF document portion. At410, the computer system100merges all PDF document portions into a single PDF document. In some implementations, the computer system100generates and stores each PDF document portion and merges all the PDF document portions into the PDF document in one step. Alternatively or in addition, each time that the computer system100generates a PDF document portion, it merges that PDF document portion with a previously-generated PDF document portion. By doing so, the computer system100assembles all the PDF document portions, one portion at a time, into the final PDF document. At412, the computer system100displays the PDF document on the display device.

In the implementations described earlier, the computer system100divided the user interface component into multiple sub-components and performed processing on each sub-component. In some implementations, the number of sub-components into which the user interface component is to be divided can be specified by a user. For example, if the user interface component is a table that includes several, for example, more than 100 rows, then the user can specify that each sub-component include 10 or fewer rows. In such implementations, the user interface component is divided horizontally. Alternatively or in addition, the computer system100can divide the user interface component vertically. For example, if the user interface component is a table that includes several, for example, more than 100 columns, then the user can specify that the user interface component be divided vertically and that each sub-component include 10 or fewer components. Another example in which the user interface component can be divided vertically is when the HTML screen to be printed as an electronic document is a map. The user can decide the number of sub-components into which the user interface component is divided based on the users experience with converting the user interface component into an electronic document and based on constraints, for example, timeout and canvas size thresholds, associated with the computer application that renders the user interface component.

FIG.5is an example of a display device500displaying a user interface502generated using HTML5. The example user interface502is a Gantt chart having parameters specified at the top of the chart. The user interface502includes a selectable object504, for example, a button object labeled “Export” or “Print”. The user input that initiates the conversion of the user interface502into an electronic document in accordance with the implementations described here is the selection of the selectable object504.

FIG.6is an example of the display device500displaying a user interface602showing progress of converting the user interface502into an electronic document. In response to receiving a selection of the selectable object504, the computer system100initiates the conversion processes described here. In some implementations, the computer system100presents a user interface602overlaying or in place of the user interface502. In the user interface602, the computer system100displays a progress bar604that indicates a continuously updated status of the conversion.

FIG.7is an example of the display device500displaying a preview of the electronic document702. After successful conversion of the user interface502into an electronic document, the computer system100displays the user interface702which includes a preview of the electronic document. At this stage, a user can provide input to the computer system100accepting the electronic document. In response, the computer system100can display the electronic document in the display device500.FIG.8is an example of the display device500displaying the electronic document802.

This disclosure describes certain implementations in the context of printing PDF documents. However, the techniques described here can be implemented to print user interface components, for example, HTML screens, in formats other than PDF, for example, PNG, JPG and other electronic document formats subject to the capability of the Electronic Document Processor190to convert the canvas into such formats.

An electronic document (which for brevity will simply be referred to as a document) may, but need not, correspond to a file. A document may be stored in a portion of a file that holds other documents, in a single file dedicated to the document in question, or in multiple coordinated files.