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

Iterate through the input values using a for loop and output the value of each individual input

I am working on an express app where I need to loop through data in my EJS file to create 5 hidden input fields, each with a unique value. However, I am struggling to extract the values of these inputs using JavaScript. Despite trying multiple methods, I ...

AngularJS's hidden input field is not being properly updated

I am currently using angularjs v1.0.7 and facing an issue with a hidden form field whose value is related to another input value. In the example provided at http://jsfiddle.net/4ANaK/, the hidden field does not update as I type in the text input field. &l ...

sending a parameter in the reverse url using JavaScript

coding in javascript let address = '{% url candidate_resume "cnd_id" %}'; address = address.replace("cnd_id",id); document.getElementById('cell2').innerHTML= '<a href="' + address + '"> View Resume < ...

Adjust the color of text in Angular as you input text

Here is my setup: <input type="number" ng-model="myNumber"> $scope.$watch('myNumber', function(nV, oV) { $scope.myNumberPlus10 = (nV + 10); }); <span>{{ myNumberPlus10 }}</span> I want the text color of <span>{{ myN ...

What are some reasons why the XMLHttpRequest ProgressEvent.lengthComputable property could return a value of

I've been struggling to implement an upload progress bar using the XMLHttpRequest level 2 support for progress events in HTML5. Most examples I come across show adding an event listener to the progress event like this: req.addEventListener("progress ...

Encountering a NPM error when trying to launch the server using ng serve

I encountered an error : ERROR in /opt/NodeJS/FutureDMS/src/app/app.module.ts (5,9): Module '"/opt/NodeJS/FutureDMS/src/app/app.routing"' has no exported member 'APP_ROUTE'. Within my code, I have utilized arrow function in the loadCh ...

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

Troubleshooting: ng-disabled feature is not properly functioning with Bootstrap buttons

I am currently using a combination of bootstrap.js and angular js in my project. The code snippet I have is as follows: //snippet from the controller $scope.isWaiting = true; $scope.promise = $http.get("voluumHandler.php?q=campaigns&filter=traffic-sou ...

Error encountered with react-query and UseQueryResult due to incorrect data type

I'm currently implementing react-query in my TypeScript project: useOrderItemsForCardsInList.ts: import { getToken } from '../../tokens/getToken'; import { basePath } from '../../config/basePath'; import { getTokenAuthHeaders } fr ...

Highlighting the selected tab with an active class

Currently in the process of learning angularJs, I am still new to it and attempting to dynamically add an active class to the recently clicked tab. Within my interface, there are four tabs: insert, view, update & delete. My goal is to apply the active ...

Determining whether an element possesses an attribute labeled "name" that commences with a specific term, apart from the attribute "value"

I'm planning to use distinctive data attributes with a prefix like "data-mo-". Let's say I have the following elements: <span data-mo-top-fade-duration="600">Title 1</span> <span data-mo-bottom-fade-duration="600">Title 2</ ...

Is it possible to transform a ReadonlyArray<any> into a standard mutable array []?

At times, when working with Angular functions and callbacks, they may return a ReadonlyArray. However, I prefer using arrays in the traditional way and don't want to use immutable structures like those in Redux. So, what is the best way to convert a ...

The button will be disabled if any cells in the schedule are left unchecked

I am seeking help on how to dynamically disable the save button when all checkboxes are unchecked. Additionally, I need assistance with enabling the save button if at least one hour is selected in the schedule. Below is my code snippet for reference: htt ...

Tips for resolving the setAttribute() function error message: "Argument of type 'boolean' is not assignable to parameter of type 'string'"

I am currently working on a function that dynamically updates the HTML aria-expanded attribute based on whether it is true or false. However, when I declare element as HTMLElement, I encounter an error stating Argument of type 'boolean' is not as ...

Preserve the wpColorPicker selection using personalized knockout bindings

Utilizing wpColorPicker and knockout, my goal is to update the color picker value in my observable and then store it in the database as JSON. While other elements successfully update and save, there seems to be an issue with my custom binding for the data ...

Issue with Bootstrap 5 Carousel not transitioning between slides

I am trying to add a carousel to my webpage, but it seems like it's not sliding and only displaying the first image. I've double-checked my code and everything else from Bootstrap works fine. Here's the snippet of code I'm using: < ...

AngularJS - linking a function to an isolated scope using '&', but failing to trigger on ng-click event

I have a parent directive that includes a controller setting a method on $scope. In the child directive, I attempt to access this scope method using &. However, when trying to use the ng-click inside the child directive, it does not activate the pare ...

In my experience, Angular will generate an error if a form tag in HTML contains special characters, such as the colon symbol ':' in the 'name' attribute

Currently, I am in the midst of a Salesforce project and I am contemplating utilizing Angular JS for its remarkable capabilities. One issue I have encountered is that Salesforce prefixes form attributes like name and id with dynamic IDs. For example, if th ...

Is there a way to slow down the falling effect on my navigation bar?

As I was working on my personal website, I had a creative idea to add a falling-down animated effect instead of keeping the layout fixed. Utilizing bootstrap for navigation, I encountered some difficulty in controlling the speed of the falling effect. Any ...