使用EVOpdf、WebAPI和AngularJS生成PDF

f45qwnt8 于 2023-08-02 发布在 Angular

关注(0)|答案(3)|浏览(119)

我在使用EVOdf从WebAPI控制器到AngularJS应用程序渲染PDF时遇到问题。
这是我目前为止的代码：

Angular 调用：

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时，它呈现得很好，但当它通过Angular调用返回并在Adobe Reader中打开时，我得到一个 “无效颜色空间” 错误消息，弹出了好几次，但文档没有打开。当我将颜色空间更改为灰度时，PDF打开，但它是空白的。
我有一种感觉，这是ByteArrayContent转换导致了这个问题，因为这是实际创建PDF和将其发送回Angular调用之间唯一发生的事情，但我遇到了砖墙，无法找出问题是什么。
我真的很感激你们能提供的任何帮助，因为我是如此接近整理这一点，我只需要文件“转换”正确时，从电话返回。
提前感谢任何帮助。
问候约翰

angularjs

来源：https://stackoverflow.com/questions/31934297/generate-pdf-using-evopdf-webapi-and-angularjs

3条答案

按热度按时间

ruarlubt1#

使用npm i puppeteer-core或yarn add puppeteer-core安装puppeteer-core npm包cmd
example.js启动

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });
          
    await browser.close();
})();

字符串
在命令行node example.js上执行脚本
Puppeteer将初始页面大小设置为800× 600 px，这定义了屏幕截图大小。页面大小可以使用Page.setViewport（）自定义。
示例-创建PDF并将文件另存为hn.js

const puppeteer = require('puppeteer');
     
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://news.ycombinator.com', {
        waitUntil: 'networkidle2',
    });
    await page.pdf({ path: 'hn.pdf', format: 'a4' });  
    await browser.close();
})();

型
现在，在命令行node hn.js上执行脚本
有关创建pdf的更多信息，请参阅Page.pdf（）。
示例-在页面上下文中计算脚本
将文件另存为get-dimensions.js

const puppeteer = require('puppeteer');
 
(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.goto('https://example.com');
 
   // Get the "viewport" of the page, as reported by the page.
   const dimensions = await page.evaluate(() => {
   return {
       width: document.documentElement.clientWidth,
       height: document.documentElement.clientHeight,
       deviceScaleFactor: window.devicePixelRatio,
       };
   });
   console.log('Dimensions:', dimensions);
     
   await browser.close();
})();

型
在命令行node get-dimensions.js上执行脚本
请参阅Page.evaluate()以了解有关evaluate和相关方法的更多信息，如evaluateOnNewDocument和exposeFunction。

赞(0）回复(0）举报 2023-08-02

whhtz7ly2#

问题似乎是在客户端，字符没有在响应中正确解析。对于任何与此斗争的人，我在这里找到了我的解决方案：SO Question

赞(0）回复(0）举报 2023-08-02

wh6knrhe3#

你试过Headless Chrome吗？Here是一篇关于这个主题的好文章。为此，我使用**https://github.com/puppeteer/puppeteer**，这是一个易于集成的解决方案。

赞(0）回复(0）举报 2023-08-02