The compatibility issue between Angular JS App and JSPDF is causing malfunctions specifically in Internet Explorer

I am currently working on an Angular JS application that utilizes JSPDF for generating PDFs.

While the PDF generation functionality works perfectly fine on Chrome, Firefox, and Safari, it encounters issues on Internet Explorer (IE). The specific error message I receive in IE is:

SCRIPT438: Object doesn't support property or method 'trimLeft' 
jspdf.plugin.from_html.js, line 71 character 4

Here is a snippet of the JavaScript code responsible for generating the PDF:

 function mainControl($scope) {

    $scope.showtooltip = false;
    $scope.value = 'Generate PDF';

    $scope.hideTooltip = function() {
      $scope.showtooltip = false;
    }

    $scope.toggleTooltip = function(e) {
      e.stopPropagation();
      $scope.value = 'HERE';
      $scope.showtooltip = !$scope.showtooltip;
    }
  }

  function printPDF() {

    var doc = new jsPDF();
    var elementHandler = {
      '#oi' : function(element, renderer) {
        return true;
      }
    };

    var source = window.document.getElementsByTagName("body")[0];

    doc.fromHTML($('#content').get(0), 10, 15, {
      'width' : 190
    });


    doc.setFont("helvetica");
    doc.setFontType("normal");
    doc.setTextColor(198, 0, 24);
    doc.setFontSize(10);
    doc.text(10, 10,  'xxxx');

    doc.output("dataurlnewwindow")  
  }

  var Show = {
    getFromPDF : function() {
      $('#btn-pdf').click(function() {
        printPDF();
      });
    }
  }

  $(function() {
    Show.getFromPDF();
  });

Answer №1

Internet Explorer does not support the non-standard function trimLeft of String.prototype. For more information, you can check out this link.

If you encounter this issue, here is a workaround:

<!--[IF IE]>
<script type="text/javascript">
    if (typeof String.prototype.trimLeft !== 'function') {
        String.prototype.trimLeft = function() {
            return this.replace(/^\s*/,'');
        }
    }
</script>

To see it in action, here is a simple demo:

if (typeof String.prototype.trimLeft !== 'function') {
  String.prototype.trimLeft = function() {
    return this.replace(/^\s*/, '');
  }
}


var myString = "                                         YEBO zsdsad sadsad    ";
console.log("test");
console.log(myString.trimLeft());

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

Is it possible to retrieve the vertices array from a QuickHull instance in three.js?

I'm currently working on generating a geometry using QuickHull from a THREE Mesh. However, it seems that the QuickHull object only contains information pertaining to the Faces of the mesh. Does anyone know if there is a way to access the vertex infor ...

Using collection-repeat with checkboxes for input types

Having a database of contacts, I am generating an ion-item for each contact using collection-repeat. Each ion-item consists of a span, a paragraph, and a checkbox element. The reason behind choosing collection-repeat over ng-repeat is to enhance performanc ...

How to pass props dynamically to components in VueJS with ease

My view is always changing: <div id="myview"> <div :is="currentComponent"></div> </div> I have linked it to a Vue instance: new Vue ({ data: function () { return { currentComponent: 'myComponent', } ...

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

Using PHP variables in JavaScript is not compatible

Currently, I am facing an issue where PHP variables inside the javascript code are not being echoed. When I try to echo the variables outside of the javascript, everything works perfectly fine. After carefully reviewing my code multiple times, I still cann ...

Adjust image size dynamically while keeping the original aspect ratio

Is there a way to scale variable portrait and landscape images dynamically to fit proportionally within a browser window? You can find my current image resizing attempt here: http://jsfiddle.net/6pnCH/4/ I would like the image to be already scaled vertic ...

Selenium Scrolling: Improving Web Scraping Efficiency with Incomplete Data Extraction

I have been attempting to extract product data from a website that utilizes JavaScript to dynamically render HTML content. Despite using Selenium, implementing scrolling functionality to reach the end of the page, and allowing time for the page to reload, ...

What is the method for obtaining the selected option value while hovering over a dropdown list option?

Hello, I am using the Chosen jQuery plugin to select image options. When I change the trigger, I can easily get a value. Now, I want to be able to get the value when I hover over an option in the select dropdown menu, like shown in the image below, and dis ...

Create an HTML table row that includes a value along with its related sibling and parent values

I need to create an HTML table that compares segments in a JSON object. The format should display the segments along with their measures organized by domain group and vertical: ------------------------------------------------------------------------------ ...

Check the validity of your JavaScript files with our convenient online tool!

Is there a website or online tool available to validate the syntax of JavaScript code in a file? I am experiencing problems with Internet Explorer 7 while running JavaScript, so I want to make sure my JavaScript file is valid. ...

The factory in Ionic does not support the usage of http.get command

When attempting to retrieve data from a URL within my controller, everything functions properly. However, once I transfer this code into a factory, it stops working. What could be causing this issue? angular.module('starter.notifications', []) ...

Pagination Component for React Material-UI Table

I am interested in learning about Table Pagination in React UI Material. Currently, my goal is to retrieve and display data from an API in a Material UI Table. While I have successfully implemented some data from the API into the Material UI Table, I am ...

Is there a way for my directive to prevent drag action when the dragleave event is triggered?

To enhance the manual sorting process of nested ngRepeats, I have implemented three directives: draggable, droppable, and drop boundary. The draggable and droppable directives are functioning correctly, utilizing event listeners to facilitate drag and dro ...

Finding the label that is linked to the current DIV or textarea by its "for" property

I am working on a project that involves two elements - a textarea and a div. Each element has a label attached to it using the "for" attribute in HTML. <textarea id="txta_1" class="txta" cols="40" rows="3" onkeyup ...

Utilize Vuex to update the data of specified items in VueJS

I've developed a module for handling reservations and this is the structure of my vuex store: import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { reservations: [], stats: { pending: 0, confi ...

Guide for making an accordion with a close button that is specific to multiple dynamic IDs

I am looking to create an accordion feature. The idea is that when the user clicks on "Show," the text "Show" should be hidden, and the content along with a "Close" button should be displayed. Then, when the user clicks on "Close," the content and "Close" ...

nextJS does not recognize the term 'Window'

I'm encountering the error "window is not defined" in my NextJS project. The variable isMobile determines whether the window size is less than 767.98 to handle the hamburger menu functionality. This code worked in ReactJS but seems to be causing issue ...

Dynamically assigning anchor tags to call JavaScript functions

Creating a list dynamically, full of <span class="infa9span"><img src="/csm/view/include/images/foldericon.png"/><a id="infa9Service">'+servicename+'</a><br/></span> tags. This list is then appended to a div. ...

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication

I am currently in the process of developing a dashboard using Vue, Vuex, and Quasar. However, I have encountered an authentication error that is preventing me from progressing. Additionally, I need assistance in ensuring that when a user is already logged ...