从网络服务正确获取PDF后无效

PDF invalid after getting it correctly from webservice

在我的 Angular4 应用程序中,我将我的 Web 服务称为 returns 使用 ByteArrayContent 的响应。当我检查网络负载中的这些数据时,它看起来非常像一个有效的 PDF 文件。生成以下数据的 html-string 肯定有效,因为在线 pdf 转换器(第三方)能够正确转换我的 html-string。

从 WebApi 生成数据以证明它是一个 PDF 文件

%PDF-1.5
4 0 obj
<</Type /Page/Parent 3 0 R/Contents 5 0 R/MediaBox [0 0 612 792]/Resources
<</Font<</FAAAAH 7 0 R>>>>/Group 
...
<</Length 9 0 R/Filter /FlateDecode>>stream
... ... ...
startxref
23589
%%EOF
  1. 当我 copy/paste 将整个文本转换为 txt 文件并将结尾更改为 .pdf 时,文件打开,但没有显示任何内容

  2. 当我使用 JavaScript 文件保护程序时,文件会被下载。但是提供的pdf文件的页眉和页脚全是空值,甚至无法打开。

这是下载文件的代码

` let myHeaders = new Headers({ 
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
        'Accept': 'application/pdf',
        'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: myHeaders });
    return this.http.post(this.URL, {'htmlString':html}, options)
    .map((response: Response) => {
        let fileBlob:ArrayBuffer = response.arrayBuffer();
        let blob = new Blob([fileBlob], {type: 'application/pdf'});
        let filename = "testPdf.txt";
        FileSaver.saveAs(blob, filename);
        return response;
    });
}`

在教程中,他们使用response.blob()而不是response.arrayBuffer(),但是当我使用.blob()时,异常

Error: The request body isn't either a blob or an array buffer

Angular2+、TypeScript 或 JavaScript 中是否有任何方法可以正确转换 PDF 数据?

这是我的 C# 代码,通常应该没问题。 HtmlToPdfServiceClient-Class是由WSDL文件生成的,所以这部分绝对正确

HtmlToPdfServiceClient client = new HtmlToPdfServiceClient();
HtmlToPdfConversionRequest reqest = new HtmlToPdfConversionRequest();
reqest.Format = ResponseFormats.BASE64;
reqest.InputText = Convert.ToBase64String(System.Text.Encoding.Unicode.GetBytes((string)json["htmlString"]));           
HtmlToPdfConversionResponse response = client.Conversion(reqest);        
HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
result.Content = new ByteArrayContent(Convert.FromBase64String(response.ResultBase64));          
result.Content.Headers.ContentType =
      new MediaTypeHeaderValue("application/pdf");           
client.Close();
return result;

您收到 HTML 并想将其转换为 PDF 吗?如果是这样,请尝试使用其他 api 将 HTML 转换为 PDF。我建议看看"ByteScout PDF SDK"。它有非常简单直接的方法来做到这一点。你可以看到代码片段。

 // Create converter instance
            using (HtmlToPdfConverter converter = new HtmlToPdfConverter())
            {
                // Perform conversion
                converter.ConvertHtmlToPdf("sample.html", "result.pdf");
            }

            // Open result document in default PDF viewer
            Process.Start("result.pdf");

我很久以前就在我们的 Angular 应用程序中实现了它,它非常适合我。

您需要在组件中具有以下依赖项:

import * as FileSaver from 'file-saver'; import { Http, RequestOptions, Headers, ResponseContentType } from '@angular/http';

以及您的组件的构造函数:

constructor(private http: Http) {}

以下所有代码都可以包装在一个方法中,并且可以通过单击按钮触发:

  1. 设置 url 授权 header

const url = 'your/url/to/the/pdf'; const header = new Headers(); header.append('Authorization', 'your-authorization-token');

  1. 使用 header
  2. 创建请求选项

const requestOptions = new RequestOptions({ headers: header });

  1. 将 ResponseContentType 添加到您的请求选项

requestOptions.responseType = ResponseContentType.Blob;

  1. 正在从您的 API 获取数据并使用文件保护程序保存它

this.http.get(url, requestOptions).subscribe(response => FileSaver.saveas(response.blob(), 'test.pdf'));