Question

我已经使用AngularJS开发了SPA（单页应用程序），我正在尝试使用AngularJS强制下载pdf文件。

到目前为止，我只能使用下一个代码在新标签页中打开de pdf文件。

HTML视图：

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'area',
      spacingBottom: 30
    },
    title: {
      text: 'Fruit consumption *'
    },
    subtitle: {
      text: '* Jane\'s banana consumption is unknown',
      floating: true,
      align: 'right',
      verticalAlign: 'bottom',
      y: 15
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    xAxis: {
      categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
    },
    yAxis: {
      title: {
        text: 'Y-Axis'
      },
      labels: {
        formatter: function() {
          return this.value;
        }
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.x + ': ' + this.y;
      }
    },
    plotOptions: {
      area: {
        fillOpacity: 0.5
      },
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'John',
      data: [0, 1, 4, 4, 5, 2, 3, 7]
    }, {
      name: 'Jane',
      data: [1, 0, 3, null, 3, 1, 2, 1]
    }]
  });


  // the button action
  var chart = $('#container').highcharts();

  $('#button').click(function() {
    for (i = 0; i < chart.yAxis[0].series[1].yData.length; i++) {
      if (chart.yAxis[0].series[1].yData[i] == null) {
        chart.xAxis[0].addPlotBand({
          from: i - 1,
          to: i + 1,
          color: '#FCFFC5',
        });
      }
    }
  });
});

控制器：

<a ng-click="download()"></a>

有没有办法强制在浏览器中下载PDF格式？

您可以在以下网址中看到此示例：

www.juanmanuellopezpazos.es/curriculum(HTML View）

www.juanmanuellopezpazos.es/Curriculum.pdf（我希望强制下载的pdf文件）

Answer 1

我在MVC.NET WITH ANGULAR JS中完成了这个。它也适用于firefox（测试版本：50.0）在函数中记下以下代码：

//in mvc view
<a ng-href="#"   title="{{attachments.FileName}} " ng-click="download(attachment.FilePath,attachment.FileName)">{{attachments.FileName}} </a>

// in .js file
 $scope.download = function download(pathoffile, filename) {
        $http.get(pathoffile, {
            responseType: "arraybuffer"
        }).then(function (response) {
            $scope.filedata = response.data; 
            var headers = response.headers(); 
            headers['Content-Disposition'] = "attachment";
            var blob = new Blob([response.data], { type: "octet/stream" });
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob); 
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }); 

    }

Answer 2

上一个问题应提供相当多的信息。 (HTML) Download a PDF file instead of opening them in browser when clicked

在您的情况下，我建议您直接链接到PDF并使用下载属性（http://www.w3schools.com/tags/att_a_download.asp）。

Answer 3

最后，我得到了@kierandotco answer的解决方案。最好的方法是这样的：

<a href="host/file.pdf" download target="_self"></a>

具有download值的target HTML5属性和_self属性可以解决问题。

是否可以在带有angularjs的浏览器中强制下载文件？

3 个答案: