jsPDF - Getting black images on IE, but works fine on Chrome and FireFox

问题

I need some help with the following problem, when I get a pdf with images on Chrome and FireFox I can get a good résult, jsPDF put on it some blur but I can live with it.

Result on Chrome

In other hand, on IE 10,11 and Edge the result is the following:

Result on IE

If you notice we can see something on pictures but almost is black.

Those are charts from highcharts and I convert svg to canvas.

I put some snippets but I can send to email the whole example:

  var doc = new jsPDF('p', 'pt', 'a4', true);
  var centered_x = (doc.internal.pageSize.width / 2) - ((context.destWidth / 2) * 0.75);

imgData_1 = atob(imgData_1);
doc.addImage(imgData_1, 'png', centered_x, 50);

data.datauri = context.browserSupportDownload && doc.output('datauristring');
data.blob = context.browserSupportBlob && doc.output('blob');

I call the function download to send the stream to the browser and its definition is like that:

  var download = function(highChartsObject, context, data) {
    if (!data || (!data.content && !(data.datauri || data.blob))) {
      throw new Error("Something went wrong while exporting the chart");
    }

    if (context.browserSupportDownload && (data.datauri || data.content)) {
      a = document.createElement('a');
      a.href = data.datauri || ('data:' + context.type + ';base64,' + window.btoa(unescape(encodeURIComponent(data.content))));
      a.download = 'result_good.pdf';
      document.body.appendChild(a);
      a.click();
      a.remove();
    }
    else if (context.browserSupportBlob && (data.blob || data.content)) {
      blobObject = data.blob || new Blob([data.content], { type: context.type });
      window.navigator.msSaveOrOpenBlob(blobObject, 'IE_CASE.pdf');
    }
    else {
      //window.open(data);
        window.navigator.msSaveOrOpenBlob(blobObject, 'IE_CASE.pdf');
    }
  };

Thanks in advance.

回答1:

Try changing the background color of the image using canvas or svg. https://github.com/MrRio/jsPDF/issues/247

来源：https://stackoverflow.com/questions/38805961/jspdf-getting-black-images-on-ie-but-works-fine-on-chrome-and-firefox

标签

javascript

html

Highcharts

jspdf