在IE11中下载文件

本文介绍了在IE11中下载文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我创建了一个应用程序，通过使用JSON在图表上绘制详细信息。然后将该图表另存为png / pdf。为此我的代码是 -

I create a application in which draw details on a chart by using JSON. and then save that chart as png/pdf. For this my code is -

function ExportPdfAndSaveChart(id, title, type, downLoadFile, selectedProject) { var dateForFileName = getfileDateForName(); downLoadFile = downLoadFile + "_" + dateForFileName; //code to convert image from svg to canvas var html = d3.select(id).select("svg") .attr("version", 1.1) .attr("xmlns", "www.w3/2000/svg") .node().parentNode.innerHTML; var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var img = '<img src="' + imgsrc + '">'; d3.select("#svgdataurl").html(img); var iDiv = document.createElement('div'); iDiv.id = 'block'; document.getElementsByTagName('body')[0].appendChild(iDiv); var innerDiv = document.createElement('canvas'); iDiv.appendChild(innerDiv); var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"); canvas.width = 800; canvas.height = 1130; context.font = "30px Arial"; context.textAlign = 'center'; context.fillStyle = '#fff'; context.fillRect(0, 0, canvas.width, canvas.height); var image = new Image(); image.crossOrigin = "Anonymous"; image.src = imgsrc; image.onload = function () { context.drawImage(image, 100, 200); context.fillStyle = "Black"; context.rect(10, 10, 772, 1100); context.stroke(); context.strokeStyle = 'blue'; context.lineWidth = 5; context.fillText(title, 380, 50); context.font = "20px Arial"; context.textAlign = 'center'; context.fillText(selectedProject, 380, 80); var canvasdata = canvas.toDataURL("image/png");/*"image/png", 1, 0*/ //type=1 is for export pdf else for png if (type == 1) { pdf = new jsPDF('p', 'mm', [297, 210]); pdf.setFontSize(40); pdf.addImage(canvasdata, 'png', 0, 0); pdf.save(downLoadFile + ".pdf"); } else { var pngimg = '<img src="' + canvasdata + '">'; d3.select("#pngdataurl").html(pngimg); var a = document.createElement("a"); document.body.appendChild(a); a.download = downLoadFile + ".png"; a.href = canvasdata; a.click(); } }; }

此代码与chrome / firefox完美运行。但是在IE中出现错误 - var canvasdata = canvas.toDataURL（image / png）;错误是 SecurityError

THis code is run perfectly with chrome/firefox. But in IE gives error on line - var canvasdata = canvas.toDataURL("image/png"); Error is SecurityError

为此我设置了image.crossOrigin =Anonymous;也。但仍然没有用。

For this I set image.crossOrigin = "Anonymous"; also. But still it is not work.

推荐答案

我偶然发现了类似的问题（在我的案例中有PDF文件），并解决了它是这样的：

I stumbled with a similar issue (with PDF files, in my case), and solved it like this:

$http.get('/webclientes/api/policies/getPlanFile/OLAS&&CG247S2501.pdf', { $http.get('/webclientes/api/policies/getPlanFile/'+datos, { responseType: 'blob' }) .success(function(data, response) { vm.errorNoExistePDF = true; var file = new Blob([data], { type: 'application/pdf' }); var fileURL = URL.createObjectURL(file); if ($window.navigator && $window.navigator.msSaveOrOpenBlob) { $window.navigator.msSaveOrOpenBlob(file); }else $window.open(fileURL); }) .error (function(data){ console.log("ERROR"); vm.errorNoExistePDF = true; }); });

注意这一点：

if ($window.navigator && $window.navigator.msSaveOrOpenBlob) { $window.navigator.msSaveOrOpenBlob(file);