Question

在我的Angular4应用程序中，我调用我的Webservice，它返回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

当我将整个文本复制/粘贴到txt文件并将结尾更改为.pdf时，文件会打开，但没有显示任何内容
当我使用JavaScript文件保护程序时，文件会被下载。但是提供的pdf文件的页眉和页脚已经满了nul值，甚至无法打开它。

这是下载文件的代码

` 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()时，异常

错误：请求正文不是blob或数组缓冲区

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;

Answer 1

我很久以前在Angular应用程序中实现了它，它对我来说非常适合。

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

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

组件的构造函数：

constructor(private http: Http) {}

以下所有代码都可以包含在方法中，并可以通过单击按钮来触发：

使用授权标题设置网址

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

使用标题

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

将ResponseContentType添加到您的请求选项

requestOptions.responseType = ResponseContentType.Blob;

从您的API获取数据并使用filesaver保存

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

Answer 2

您是否正在获取HTML并希望将其转换为PDF？如果是这样，请尝试使用其他api将HTML转换为PDF。我建议您查看＆＃34; ByteScout PDF SDK＆＃34;。它有非常简单直接的方法。你可以看到代码片段。

 // 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");

从webservice正确获取后，PDF无效

2 个答案: