EVOPdf, WebAPI 및 AngularJS를 사용하여 PDF 생성

EVOPdf, WebAPI 및 AngularJS를 사용하여 PDF 생성

WebAPI 컨트롤러의 EVOPdf를 사용하여 PDF를 Angular로 렌더링하는 데 문제가 있습니다.JS app.

지금까지 제 암호입니다.

각도 호출:

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);
    }
});

APIC 컨트롤러 방법:

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;

내가 작성한 PDF를 확인할 때WriteAllBytes, 완벽하게 렌더링되지만 Angular call을 통해 반환되고 Adobe Reader에서 열리면 "Invalid Color Space" 오류 메시지가 몇 번이나 뜨지만 문서가 열리지 않습니다.GrayScale로 색공간을 변경하면 PDF가 열리지만 비어있습니다.

뭔가 느낌이 들어요.ByteArrayContent변환이 문제를 일으키고 있습니다. PDF를 실제 생성하고 Angular call로 다시 전송하는 사이에 발생하는 유일한 일이지만, 벽에 부딪혀 문제가 무엇인지 알 수 없습니다.

저는 이 문제를 거의 해결하고 있고 전화를 받고 돌아올 때 제대로 "변환"할 수 있는 문서가 필요하기 때문에 여러분이 어떤 도움이라도 주시면 정말 감사하겠습니다.

어떤 도움이라도 주신다면 미리 감사드립니다.

안녕, 요한.

다음을 사용하여 puppeteer-core npm 패키지 cmd 설치npm i puppeteer-core아니면yarn add puppeteer-core

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는 초기 페이지 크기를 스크린샷 크기를 정의하는 800x600px로 설정합니다.페이지 크기는 페이지로 사용자 정의 할 수 있습니다.Viewport()를 설정합니다.

예제 - 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

pdffs 생성에 대한 자세한 내용은 페이지.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()평가 및 OnNew Document 평가 및 함수 노출과 같은 관련 방법에 대한 자세한 내용을 보려면 를 참조하십시오.

문제는 클라이언트 측에서 반응에서 문자가 제대로 구문 분석되지 않는 것 같습니다.이 문제로 어려움을 겪고 있는 모든 사람들을 위해 저는 여기서 제 해결책을 찾았습니다. SO 질문입니다.

헤드리스 크롬 먹어봤어요?여기 이 주제에 대한 좋은 기사가 있습니다.이를 위해 https://github.com/puppeteer/puppeteer 을 사용하고 있었는데 쉽게 통합된 솔루션이었습니다.

언급URL : https://stackoverflow.com/questions/31934297/generate-pdf-using-evopdf-webapi-and-angularjs