使用EVOPdf、WebAPI和AngularJS生成PDF

Question

我在使用EVOPdf从WebAPI控制器绘制PDF到AngularJS应用程序时遇到了问题。

到目前为止，这是我的代码：

角呼叫：

var url = 'api/form/build/' + id;

$http.get(url, null, { responseType: 'arraybuffer' })
.success(function (data) {
    var file = new Blob([data], { type: 'application/pdf' });

    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(file);
    }
    else {
        var objectUrl = URL.createObjectURL(file);
    window.open(objectUrl);
    }
});

APIController方法：

var url = "http://localhost/index.html#/form/build/" + id;

#region PDF Document Setup
HtmlToPdfConverter htmlToPdfConverter = new HtmlToPdfConverter();

htmlToPdfConverter.LicenseKey = "4W9+bn19bn5ue2B+bn1/YH98YHd3d3c=";
//htmlToPdfConverter.HtmlViewerWidth = 1024; //default
htmlToPdfConverter.PdfDocumentOptions.PdfPageSize = PdfPageSize.A4;
htmlToPdfConverter.PdfDocumentOptions.PdfPageOrientation = PdfPageOrientation.Portrait;
htmlToPdfConverter.ConversionDelay = 3;
htmlToPdfConverter.MediaType = "print";

htmlToPdfConverter.PdfDocumentOptions.LeftMargin = 10;
htmlToPdfConverter.PdfDocumentOptions.RightMargin = 10;
htmlToPdfConverter.PdfDocumentOptions.TopMargin = 10;
htmlToPdfConverter.PdfDocumentOptions.BottomMargin = 10;
htmlToPdfConverter.PdfDocumentOptions.TopSpacing = 10;
htmlToPdfConverter.PdfDocumentOptions.BottomSpacing = 10;
htmlToPdfConverter.PdfDocumentOptions.ColorSpace = ColorSpace.RGB;

// Set HTML content destination in PDF page
htmlToPdfConverter.PdfDocumentOptions.Width = 640;

htmlToPdfConverter.PdfDocumentOptions.FitWidth = true;
htmlToPdfConverter.PdfDocumentOptions.StretchToFit = true; 
#endregion

byte[] outPdfBuffer = htmlToPdfConverter.ConvertUrl(url);

string outPdfFile = @"c:\temp\forms\" + id + ".pdf";
System.IO.File.WriteAllBytes(outPdfFile, outPdfBuffer);


HttpResponseMessage result = null;
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new ByteArrayContent(outPdfBuffer.ToArray());
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = "filename.pdf";
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

return result;

当我检查我使用WriteAllBytes编写的PDF时，它呈现得很完美，但是当它通过角调用返回并在Adobe中打开时，我会得到一条“无效的颜色空间”错误消息，该错误消息会多次弹出，但文档不会被打开。当我将颜色空间更改为GrayScale时，PDF会打开，但它是空的。

我有一种感觉，是ByteArrayContent转换导致了这个问题，因为这是在实际创建PDF和将它发送回角调用之间唯一发生的事情，但是我碰到了一个砖墙，不知道问题出在哪里。

我真的很感激你们能提供的任何帮助，因为我非常接近于解决这个问题，我只需要当从电话中返回时，文档才能正确地“转换”。

提前感谢您的帮助。

你好，约翰。

Answer 1

问题似乎就像在客户端一样，在响应中没有正确地分析字符。对于任何对此感到疑惑的人，我在这里找到了解决方案：所以问题

Answer 2

你试过无头铬吗？这里是一篇关于这个主题的很好的文章。为此，我使用了https://github.com/puppeteer/puppeteer，这是一个很容易集成的解决方案。

Answer 3

//安装傀儡-核心npm软件包cmd npmⅠ木偶机#或“纱加木偶机芯”const木偶机=需要(‘木偶匠’)；(异步() => { const浏览器=等待puppeteer.launch()；const页=等待browser.newPage()；等待page.goto('https://example.com')；等待page.screenshot({ path：'example.png‘})；等待browser.close()；}()；

• 在命令行上执行脚本 节点example.js 木偶师将初始页面大小设置为800×600 to，这定义了屏幕截图的大小。可以使用Page.setViewport()定制页面大小。 示例-创建一个PDF。
• 将文件保存为hn.js

(“木偶师”)； (异步() => { const浏览器=等待puppeteer.launch()；const页=等待browser.newPage()；等待page.goto('https://news.ycombinator.com'，{ waitUntil：‘networkidle2 2’，})；等待page.pdf({ path：'hn.pdf'，格式：'a4‘})；等待browser.close()；}()；

• 在命令行上执行脚本 有关创建pdfs的更多信息，节点hn.js参见Page.pdf()。 示例-在页面上下文中评估脚本
• 将文件保存为get-量纲. as

(“木偶师”)； (异步() => { const浏览器=等待puppeteer.launch()；const页=等待browser.newPage()；等待page.goto('https://example.com')；//获取页面所报告的“视图端口”)。const维度=等待page.evaluate(() => {返回{宽度: document.documentElement.clientWidth，高度: document.documentElement.clientHeight，deviceScaleFactor: window.devicePixelRatio，}；})；console.log(“维数：”，维数)；等待browser.close()；})()；

• 在命令行上执行脚本 节点获取维数get 有关评估方法和相关方法(如Page.evaluate和exposeFunction )的更多信息，请参见evaluateOnNewDocument ()。