How to include images in a PDF using jspdf without encountering issues with Adobe Reader?

For a project I'm working on, I've integrated jspdf to convert some charts into a PDF. The framework I'm using is angularjs 1.5.6, and the charts are created with chart.js. The HTML snippet for the charts looks like this:

<div name="charts" class="charts">

    <div class="ft" style="width:45%; height:550px; margin-top: 20px;margin-left:2%;">
        <canvas id="biChart" class="chart chart-bar" chart-data="biData" chart-labels="biLabels" chart-options="biOptions" chart-series="series" chart-colors="biColors" chart-dataset-override="biDatasetOverride"></canvas>
    </div>

    <div class="fr" style="width:45%; height:550px; margin-top: 20px;margin-right:2%;">
        <canvas id="qzsChart" class="chart chart-bar" chart-data="qzsData" chart-labels="qzsLabels" chart-options="qzsOptions" chart-series="series" chart-colors="qzsColors" chart-dataset-override="qzsDatasetOverride"></canvas>
    </div>

</div>

The function used to export the charts to PDF is as follows:

$scope.exportChart = function() {
        var biChart = document.getElementById("biChart");
        var qzsChart = document.getElementById("qzsChart");
        var doc = new jsPDF('p', 'mm');
        var text = "Sample Charts";
        var xOffset = (doc.internal.pageSize.width / 2) - (doc.getStringUnitWidth(text) * doc.internal.getFontSize() / 2);
        doc.text(text, xOffset, 10);
        doc.addImage(biChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.addPage();
        doc.addImage(qzsChart.toDataURL('image/png'), 'PNG', 10, 10);
        doc.save('sample-chart.pdf');
    }

After generating the PDF, I can view it in the browser without any issues. However, when attempting to open the file using Adobe Reader, an error message is displayed:

https://i.sstatic.net/OwDkp.jpg

Could there be a problem with my code implementation?

javascriptangularjsjspdf

Answer №1

You have the option to include an image in your HTML content.

JavaScript Code

var pdf = new jsPDF('l','pt','a4');
                pdf.addHTML($('#invoicearea'),function() {
                    var courseenrollmentid = $(".courseenrollmentid").text();
                    pdf.output("save", "InvoiceReceipt"+courseenrollmentid+".pdf");
                });

HTML Example

 <div id="invoicearea" style="background-color: white; padding: 20px;">
        <div class="row-fluid">
            <div class="span6">
                <img style="width:20%;" alt=""
                    src="<%=request.getContextPath()%>/assets/app/images/invoicelogo.png">
            </div>
            <div class="span6">
                <address class="invoiceheader">
                    <h4 class="righttext martop20">Invoice Number : {{#if orderno}}<span class="courseenrollmentid">{{orderno}}</span>
                        {{else}}<span class="courseenrollmentid">-</span>{{/if}}</h4>
                    <h4 class="righttext martop20">Invoice Date: {{paymentdate}}</h4>
                </address>
            </div>
        </div>
        <h3 class="invoicereceipt">Invoice Receipt</h3>
        <div class="invoicepart">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Course Title</th>
                        <th>Course Author</th>
                        <th>Price<span class="rubee" style='font-family;'>(&#8377;)</span></th>

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{coursetitle}}</td>
                        <td>{{firstname}}</td>
                        <td>{{price}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row-fluid">
            <address class="invoiceaddress">
                <h4>For Details Contact</h4>
                <h4><s:text name="label.productname"></s:text></h4>      
            </address>
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing commas in JavaScript

Hi everyone, I'm having an issue with printing the message "Invalid password, Must Contain:". The problem I'm facing is that when I write the code in JavaScript, the comma is being interpreted as an operator instead of a regular English comma. Th ...

javascripthtmlasp-classic

Using `ngIf` to loop through two distinct arrays

Looking at this code snippet: <tr ng-repeat="row in someController.searchResults" ng-class="{'selected': tableRow.selected}" ng-click="selectRow(tableRow)" > This piece of code is iterating through the searchResults array. I&ap ...

angularjsangular-ng-if

Lack of communication between Node.js modules

Currently, I am diving into the world of node.js as part of a personal project to enhance my skills. To maintain best practices, I have been segmenting my code into different modules. However, I have hit a roadblock where a module I created is not communic ...

javascriptnode.jseventsasynchronous

Enhance chat functionality by integrating MySQL database to store and update chat messages

I'm currently working on developing a chat system that allows users to enter the chat and send messages. The messages are being stored in a MySQL database, and here is a snippet of my code... <script> $('input[type=text]').on('ke ...

javascriptphpmysqlajax

The error message "highcharts-ng: Unable to access property 'setExtremes' of an undefined object" was encountered

Out of nowhere, the highcharts-ng module began throwing a strange error. https://i.sstatic.net/TxoVd.png I haven't made any changes to this part of the code and I don't even use the setExtremes property. Error Line 92: https://i.sstatic.net/O ...

angularjshighchartshighcharts-ng

PL/SQL Process in Oracle APEX fails to respond when triggered via AJAX before the page unloads

In my Oracle APEX 4.2 environment, I created a PLSQL process set to execute "On Demand - When this process is called by AJAX." The purpose of this process is to update two member attributes in a collection that I established when the page loaded. Here is t ...

javascriptajaxplsqloracle-apex

Setting up craco for jsx in your project

I am currently utilizing craco and grappling with how to configure jsx. I keep encountering the error below: Support for the experimental syntax 'jsx' isn't currently enabled (4:17): The suggestion is to add `babel/preset-react or utilize ...

javascriptreactjscraco

What is the best way to define a variable in EJS?

I need to populate my database array results on the frontend using EJS. The code snippet I'm using is as follows: var tags = ["<%tags%>"] <% for(var i=0; i<tags.length; i++) { %> <a href='<%= tags[i] %&g ...

javascriptnode.jsejs

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

I'm facing a challenge: I have a desire to create a website that is mainly static but also includes some dynamic components, such as a small news blog. Unfortunately, my web server only supports static files and operates as a public dropbox directory. ...

javascripthtmlajaxweb

Mocha struggles to locate the ID within an input field - react-native

I am attempting to retrieve the text of an input using the .text() method in Selenium. However, every time I try to locate the element, it says that the specified ID was not found. (I am working with the Input component from NativeBase, but I have also te ...

javascriptreact-nativeselenium-webdriverautomated-testsmocha.js

Feeling trapped during the process of setting up a intricate jQuery Image Slider

I've hit a roadblock while trying to make changes to the slider located at THIS URL. In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next th ...

javascriptjquerycsshtml

How to utilize AngularJS to submit a Symfony2 form

I'm currently working on developing an application with Symfony2 for the backend and considering using AngularJS for the frontend. My plan is to integrate Symfony forms into the project as well. I have successfully set up the form with all the necessa ...

javascriptphpformsangularjssymfony

Retrieve information from an API and assign the corresponding data points to the graph using Material UI and React

I have 4 different APIs that I need to interact with in order to fetch specific details and visualize them on a bar graph. The data should be organized based on the name, where the x-axis represents the names and the y-axis represents the details (with 4 b ...

javascriptreactjsapichartsmaterial-ui

AngularJS written plugin in Javascript

I developed an app using Rails and AngularJS. A startup has reached out to me about transferring the technology to their website, but they have limited tech resources. The goal is to create a seamless integration process. The idea is to make it similar to ...

javascriptruby-on-railsangularjspluginscoffeescript

Focus on selecting just one button within Angular

By retrieving values from a database and displaying them using ng-repeat within a div: <div ng-controller = "myTest"> <div ng-repeat="name in names"> <h4>{{name.name}}</h4> <button ng-class="{'active ...

javascriptangularjsng-class

Difficulty in displaying YQL JSON Results with HTML/JavaScript

When utilizing the subsequent YQL query along with XPATH to retrieve data from certain elements on a webpage: select * from html where url="http://www.desidime.com" and xpath='//h5[@class="product_text"]' I am attempting to showcase the outc ...

javascriptjsonxpathyql

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

javascriptphpcssmysqlhtml-table

Tips for preventing duplicate entries in an AG Grid component within an Angular application

In an attempt to showcase the child as only 3 columns based on assetCode, I want to display PRN, PRN1, and PRN2. Below is the code for the list component: list.component.ts this.rowData.push( { 'code': 'Machine 1', &apo ...

javascriptangulartypescriptag-grid

I attempted to create a callable function for creating a user, but I encountered an error when running it and I am unable to determine the cause

I'm in the process of creating a user management page and have set up a callable function on Firebase to handle the creation of new users. The HTML function I've designed is supposed to update existing users or create new ones. However, when test ...

javascriptfirebasefirebase-authenticationgoogle-cloud-functions

Solution to the issue of hitting the maximum limit of 10 $digest() iterations

I have successfully retrieved and displayed data from the database using Web API on my webpage: <div ng-repeat="Item in Items"> <div class="row"> <div class="col-sm-3">{{Item.Id}}</div> <div class="col-sm-3" ...

angularjs