Angular 静态文件下载

Question

我正在尝试使用 Angular 创建文件下载或查看按钮。每个用户的文件都是相同的，我希望通过将静态文件放在前端来避免调用后端。

大多数解决方案都需要使用与浏览器不太兼容的“下载”属性 (CanIUse)，或者它们从服务器获取生成的文件。我只是想让用户打开或下载静态 pdf 文件。

我尝试了这样的链接：

<a href="/attachment.pdf" target="_self" >Attachment</a>

但这会寻找我显然没有的后端链接。我只想提供静态文件，而不是创建后端路由。

这可能吗？我有一个 Angular 前端和 Django 后端。

Answer 1

如果您尝试将 pdf 文件与 angular 应用程序的 javascript 代码连接起来，我认为这是不可能的（或者至少我不知道该怎么做，也不认为会是个好主意/值得）。

您可以将您的 pdf 文件作为任何其他静态文件提供，以便您通过让用户访问文件的 url 来访问它，例如：

<a href="/static/files/myfile.pdf" target="_self" >Attachment</a>

然而，这将使浏览器决定如何访问 pdf 文件。例如，Chrome 默认会打开一个“预览页面”。

如果您想强制将文件下载到用户的设备而不是允许预览，您需要通过在响应中设置 Content-Disposition 标头来使您的后端这样做。

Content-Disposition: attachment; filename="myfile.pdf"

Answer 2

从我的问题中的 cmets 可以看出，无法从前端获取 PDF。我最终制作了一条用于获取 PDF 的后端路线，然后在新选项卡中打开它。这是我使用的代码。

从服务器获取文件的可点击链接：

<a ng-click="viewFile()" href="">Attachment</a>

命中后端路由的函数：

$scope.viewFile = function() {
  var downloadFileURL = $rootScope.urlFormatter2('file');
  $http.get(downloadFileURL, {responseType:'arraybuffer'})
    .success(function(data, status, headers, config) {
      var file = new Blob([data], {type: 'application/pdf'});
      var fileURL = URL.createObjectURL(file);
      window.open(fileURL);
    })
    .error(function(error) {
      console.error(error);
    });
};

后端路由（在 Django 中）：

def ctm_file(request):
    filename = "ctm_form.pdf" # Select your file here.
    wrapper = FileWrapper(file(filename))
    response = HttpResponse(wrapper, content_type='text/plain')
    response['Content-Length'] = os.path.getsize(filename)
    return response

感谢大家帮助更好地了解使用客户端服务器应用程序获取文件的性质。