Question

我无法使用FileSaver.js

将此内容另存为正确的PDF

这是Angular代码

$http(
  { url:root.api_root+'/appointments/generatePDF/'+$route‌Params.id,
    method:'GE‌T'
}).then(function(r‌es){ // 
    $log.log(res.data); 
    var blob = new Blob([res.data], { type: 'application/pdf' });
    window.open(res.data); 
    // saveAs(blob, 'file.pdf');
});

这是TCPDF后端代码

$pdf->Output("php://output", 'F'); 
echo file_get_contents("php://output");

Answer 1

下载PDF文件等二进制数据时，设置responseType属性：

非常重要

$http(
  { url:root.api_root+'/appointments/generatePDF/'+$route‌Params.id,
    method:'GE‌T',
    //IMPORTANT
    responseType: 'blob'
}).then(function(r‌es){ // 
    $log.log(res.data);
    //var blob = new Blob([res.data], { type: 'application/pdf' });
    //window.open(res.data);
    var blob = res.data; 
    saveAs(blob, 'file.pdf');
});

如果省略responseType属性，则XHR API默认将数据处理为UTF-8文本。将数据解码为UTF-8 text的过程将损坏二进制文件，如PDF或图像。

有关详细信息，请参阅MDN Web API Reference - XHR ResponseType

Answer 2

依赖关系

安装

使用bower：bower安装angular-file-saver

使用npm：npm install angular-file-saver

基本用法

将ngFileSaver模块包含在您的项目中;
将FileSaver和Blob服务作为依赖项传递;
创建Blob object依据传递一个数组作为第一个参数和一个带有一组选项的对象作为第二个：new Blob(['text'], { type: 'text/plain;charset=utf-8' });
使用以下参数调用FileSaver.saveAs：
- data Blob ：Blob实例;
- filename 字符串：自定义文件名（扩展名是可选的）;
- disableAutoBOM 布尔值 :(可选）禁用自动提供的Unicode文本编码提示。

您可以通过将FileSaver和Blob注入控制器，然后使用如下所示的语法来实现：

angular.module('sample',['ngFileSaver'])
.controller('ConsultationDetailsController', ['$scope', 'FileSaver', 'Blob', function($scope, FileSaver, Blob){
      $scope.download = function (fileName) {
                $scope.isLoading = true;

                downloadHttpService.getDocument(fileName)
                 .then(function (response) {
                    var data = response.data;
                    var status = response.status;
                    var header = response.headers();
                    var fileType = header['content-type']; 
                    var blob = new Blob([data], { type: fileType });
                    FileSaver.saveAs(blob, originalFileName);
                })
                    .catch(function (resp) {
                      // show error
                    })
                    .finally(function (data) {
                       // execute finally block.
                    });
            };
}]);

如果您只想要pdf类型，那么您可以硬编码定义 fileType为＆＃39; application / pdf＆＃39;像这样var fileType =＆＃39; application / pdf＆＃39 ;;

希望这能解决您的问题：）

Answer 3

对我有用。试试吧。

$http(
  { url:root.api_root+'/appointments/generatePDF/'+$route‌Params.id,
    method:'GE‌T'
}).then(function(r‌es){
    $log.log(res.data);     
    saveAs('data:application/pdf;base64,' + res.data, 'file.pdf');
});

如何使用FileSaver.js在Angularjs中将以下内容保存为PDF

3 个答案:

依赖关系

安装

基本用法