Question

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

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

我尝试了这样的链接：

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

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

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

Answer 1

如果你尝试做的是连接pdf文件和角度应用程序的javascript代码，我不认为这是可能的（或者至少我不知道怎么做，也不知道怎么做我认为这是一个好主意/值得的。）

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

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

然而，这将使浏览器决定如何访问pdf文件。例如，Chrome默认情况下会打开＆＃34;预览页面＆＃34;。

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

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

Answer 2

从我对问题的评论中可以看出，从前端获取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

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

角度静态文件下载

2 个答案: