HmiGuide_0-1674126514464.png

WebIQ - Create PDF document with pdfmake

HmiGuide
Community Moderator
Community Moderator
History

23 Jan 2023  Extend example project (Add watermark, use variables for PDF creation)
19 Jan 2023  Initial release

Introduction

In WebIQ 2.13 there is no out of the box feature to create PDF files. However, since you can include JS libraries in WebIQ, you can use e.g. pdfmake JS library to create PDF content. Attached you find a:

  • WebIQ package with pdfmake library for easy usage in WebIQ
  • WebIQ example project for easy startup
Prerequisites
  • WebIQ Designer version 2.13 or higher (WebIQ project is created with 2.13)
  • Basic knowledge of WebIQ Designer
  • JavaScript and JSON know how
  • Get familiar with the usage of pdfmake via documentation and videos
Features of pdfmake

pdfmake is a JS library, with a similar concept as HTML. Settings, content and styles are defined in a json object. The pdfmake interpretes the json object and creates a PDF from it. Feature list:

  • Under MIT license
  • Text (with line-wrapping)
  • Lists (numbered and bulleted)
  • Images
  • Vector graphics
  • Tables and columns
  • Page headers, footers(with page number/count) and automatick page breaks
  • Setting of PDF metadata (e.g. author, subject, ...)
  • Download, Print and Display PDF
Useful Links
Example project

The project includes 4 different PDF examples creating PDF with: Text, tables, lists, page setup and images.
For starting, do the following in WebIQ Designer:

  1. Import example project demo-pdfmake.zip into WebIQ Designer
  2. Open the project for editing
  3. Open "Package Manager" to upload and install package-pdfmake-*.zip the project
  4. Start WebIQ project
  5. Select PDF output "Embedded"
  6. Press button "Basic" to display generated PDF with info to WebIQ project

Screen shoot of demo programScreen shoot of demo program

Update WebIQ package with a new version of pdfmake

See article: WebIQ - Communicate with ctrlX Rest API 

2 Comments
Must Read
Icon--AD-black-48x48Icon--address-consumer-data-black-48x48Icon--appointment-black-48x48Icon--back-left-black-48x48Icon--calendar-black-48x48Icon--center-alignedIcon--Checkbox-checkIcon--clock-black-48x48Icon--close-black-48x48Icon--compare-black-48x48Icon--confirmation-black-48x48Icon--dealer-details-black-48x48Icon--delete-black-48x48Icon--delivery-black-48x48Icon--down-black-48x48Icon--download-black-48x48Ic-OverlayAlertIcon--externallink-black-48x48Icon-Filledforward-right_adjustedIcon--grid-view-black-48x48IC_gd_Check-Circle170821_Icons_Community170823_Bosch_Icons170823_Bosch_Icons170821_Icons_CommunityIC-logout170821_Icons_Community170825_Bosch_Icons170821_Icons_CommunityIC-shopping-cart2170821_Icons_CommunityIC-upIC_UserIcon--imageIcon--info-i-black-48x48Icon--left-alignedIcon--Less-minimize-black-48x48Icon-FilledIcon--List-Check-grennIcon--List-Check-blackIcon--List-Cross-blackIcon--list-view-mobile-black-48x48Icon--list-view-black-48x48Icon--More-Maximize-black-48x48Icon--my-product-black-48x48Icon--newsletter-black-48x48Icon--payment-black-48x48Icon--print-black-48x48Icon--promotion-black-48x48Icon--registration-black-48x48Icon--Reset-black-48x48Icon--right-alignedshare-circle1Icon--share-black-48x48Icon--shopping-bag-black-48x48Icon-shopping-cartIcon--start-play-black-48x48Icon--store-locator-black-48x48Ic-OverlayAlertIcon--summary-black-48x48tumblrIcon-FilledvineIc-OverlayAlertwhishlist