使用EVOPdf,WebAPI和AngularJS生成PDF

时间:2015-08-11 06:03:08

标签: javascript angularjs pdf asp.net-web-api evopdf

我在使用 EVAPdf WebAPI控制器 AngularJS 应用程序渲染PDF时出现问题。

到目前为止,这是我的代码:

角度电话:

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中打开时,我得到一个"无效的颜色空间& #34; 错误消息会弹出很多次,但文档未打开。当我将色彩空间更改为GrayScale时,PDF会打开,但它是空白的。

我感觉发生导致问题的ByteArrayContent转换,被视为实际创建PDF与发送之间唯一发生的事情它回到了Angular的电话,但是我碰到了一堵砖墙,无法弄清问题是什么。

我非常感谢你们提供的任何帮助,因为我非常接近将这个问题排除在外,我只需要将文件转换为"转换"从电话中返回时正确。

提前感谢您的帮助。

此致 约翰。

3 个答案:

答案 0 :(得分:0)

问题似乎是在客户端,响应中的字符未正确解析。对于任何为此感到困惑的人,我在这里找到了解决方案:SO Question

答案 1 :(得分:0)

您尝试过Headless Chrome吗? Here是有关此主题的不错的文章。我为此使用 https://github.com/puppeteer/puppeteer ,它是一个易于集成的解决方案。

答案 2 :(得分:0)

<块引用>

// 安装 puppeteer-core npm 包 cmd

            npm i puppeteer-core
            # or "yarn add puppeteer-core"
    
           <!-- example.js start-->

       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();
        })();
  • 在命令行上执行脚本

    节点示例.js

    Puppeteer 将初始页面大小设置为 800×600 像素,它定义了屏幕截图的大小。可以使用 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();
})();
  • 在命令行上执行脚本

    节点 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();
})();
  • 在命令行上执行脚本

    节点获取维度.js

    有关evaluate 和相关方法(例如evaluateOnNewDocument 和exposeFunction)的更多信息,请参阅Page.evaluate()。