在 AngularJS 中打印 PDF 文件时出错

Question

我正在尝试在我的 Web API 中打印通过 reportViewer 生成的 PDF 文件，但浏览器在尝试打开 PDF 文件时显示错误。

这是我的 Web API 中控制器内的代码：

 // ...generate candidatosDataSet
 LocalReport relatorio = new LocalReport();
 string rootPath = HttpRuntime.AppDomainAppPath;
 relatorio.ReportPath = rootPath + @"\Reports\Report.rdlc";


 relatorio.DataSources.Add(new ReportDataSource("Candidatos", candidatosDataSet));

 relatorio.Refresh();

 byte[] relatorioBytes = ExportUtils.GerarArquivoPDF(relatorio);


 response = Request.CreateResponse(HttpStatusCode.OK, relatorioBytes);

 response.Content.Headers.ContentDisposition = System.Net.Http.Headers.ContentDispositionHeaderValue.Parse("attachment; filename=relatorio.pdf");
 response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/pdf");

这就是我通过 reportViewer

生成 PDF 文件的方式

 public static byte[] GerarArquivoPDF(LocalReport relatorio)
        {
            String reportType = "PDF";
            String mimeType;
            String encoding;
            String fileNameExtension;
            String deviceInfo;
            Warning[] warnings;
            string[] streams;
            byte[] renderedBytes;

            deviceInfo = "<DeviceInfo>" + "  <OutputFormat>" + reportType + "</OutputFormat>" + "</DeviceInfo>";

            renderedBytes = relatorio.Render(
            reportType,
            deviceInfo,
            out mimeType,
            out encoding,
            out fileNameExtension,
            out streams,
            out warnings);

            return renderedBytes;
        }

这是我的AngularJS服务方法：

function obterTermoConfirmacaoCandidatura(candidatoId) {
            return $http.get(configValues.baseUrl + 'candidato/GetRelatorio', 
            { 
                params: { candidatoId: candidatoId },
                responseType: 'arraybuffer'
            });
        }

这是我用来在 AngularJS 控制器上打印文件的代码:

function imprimirTermoConfirmacaoCandidatura(id) {
            CandidatoAPIService.obterTermoConfirmacaoCandidatura(id)
            .then(function (response) {

                var contentType = response.headers('Content-Type') || "application/octet-stream";

                var file = new Blob([response.data], {
                    type: contentType
                });

                var fileUrl = URL.createObjectURL(file);
                var printWindow = $window.open(fileUrl);
                printWindow.print();

            }, function (error) {
                alert(error.data);
            });
        }

Answer 1

来自 Web API 的响应以字符串形式出现，响应的开头和结尾带有双引号，因此无法正确呈现 PDF 文件。我还通过这种方法将服务器的响应转换为 base64：

 function b64toBlob(b64Data, contentType) {

            var sliceSize = 512;
            b64Data = b64Data.replace(/"/g, '');
            b64Data = b64Data.replace(/^[^,]+,/, '');
            b64Data = b64Data.replace(/\s/g, '');

            var byteCharacters = window.atob(b64Data);
            var byteArrays = [];

            for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
                var slice = byteCharacters.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }

            var blob = new Blob(byteArrays, { type: contentType });
            return blob;
        }

并更改了 AngularJS controller 上的方法以将响应转换为 base64:

function imprimirTermoAutorizacaoUsoImagem() {
            CandidatoAPIService.obterTermoAutorizacaoUsoImagem()
            .then(function (response) {
                var contentType = response.headers('Content-Type') || "application/octet-stream";
                var file = UtilsService.b64toBlob(response.data, "application/pdf");

                var fileUrl = URL.createObjectURL(file);
                var printWindow = $window.open(fileUrl);
                printWindow.print();
            }, function (error) {
                alert(error.data);
            });
        }

并删除 AngularJS 服务上的 responseType:

function obterTermoConfirmacaoCandidatura(candidatoId) {
            return $http.get(configValues.baseUrl + 'candidato/GetObterTermoConfirmacaoCandidatura', 
            {   
                params: { candidatoId: candidatoId }
            });
        }

在 AngularJS 中打印 PDF 文件时出错

Error when printing PDF file in AngularJS

.net

javascript

reportviewer

asp.net-web-api

angularjs