페이지를 렌더링 할 때 외부 리소스를로드 할 수 없습니다.

현재 노드 & PhantomJS를 통해 HTML 페이지에서 PDF 문서를 생성하려고합니다. 내 페이지는 지역 자원, 또는 정적 일이 포함 된 경우페이지를 렌더링 할 때 외부 리소스를로드 할 수 없습니다.

, 그것은 잘 작동 : 그래서 여기

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <link rel="StyleSheet" media="screen" href="./style.css" /> 
     <link rel="StyleSheet" media="print" href="./print.css" /> 
    </head> 
    <body> 
     <h1>The title</h1> 
     <p>hai <span class="foo">lol <span class="bar">I'm generating</span> a pdf</span> !</p> 
     <p class="centre"><img src="http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-autruche.jpg" /></p> 
     <canvas id="test_canvas" width="200px" height="100px"/> 

     <script> 
      setTimeout(function() { 
       var ctx = document.getElementById('test_canvas').getContext('2d'); 

       ctx.fillStyle = '#FF0000'; 
       ctx.fillRect(0, 0, 150, 75); 
      }, 1000); 

      setTimeout(function() { 
       evt = document.createEvent('CustomEvent'); 
       evt.initEvent('pdfTrigger', true, false); 

       document.dispatchEvent(evt); 
      }, 3000); 
     </script> 
    </body> 
</html>

, 이미지가 제대로 렌더링하고, 스타일도 제대로 렌더링됩니다. 나는 (그것이 내 로컬 환경 향하는 경우에도, 뭔가 하나 //로 시작, 중 http:// 또는 https://) 먼 이미지에서 포함, 또는 먼 스크립트를 추가한다면, 컨텐츠가로드되지 않았습니다 :

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <link rel="StyleSheet" media="screen" href="./style.css" /> 
     <link rel="StyleSheet" media="print" href="./print.css" /> 
    </head> 
    <body> 
     <h1>The title</h1> 
     <p>hai <span class="foo">lol <span class="bar">I'm generating</span> a pdf</span> !</p> 
     <p class="centre"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7c/Ostrich,_mouth_open.jpg" /></p> 

     <script> 
      setTimeout(function() { 
       evt = document.createEvent('CustomEvent'); 
       evt.initEvent('pdfTrigger', true, false); 

       document.dispatchEvent(evt); 
      }, 3000); 
     </script> 
    </body> 
</html>

이미지가 렌더링되지 않습니다. cdn 및 jQuery 코드 (예 : $(document).trigger('pdfTrigger')을 통해 이벤트 시작)에서 jQuery 포함을 시도하면 ReferenceError: Can't find variable: $이 표시되므로 이벤트가 실행되지 않습니다.

/** 
* Render a PDF from an HTML file 
* 
* @author Baptiste Clavié <[email protected]> 
* Adapted from PhantomJs' example "rasterize.js" 
*/ 

var orientation = 'portrait', 
    system = require('system'), 
    args = system.args.slice(1); 

if (args.length < 2 || args.length > 3) { 
    system.stderr.writeLine('Usage: rasterize.js source output [orientation]'); 
    system.stderr.writeLine(' source : html source to put in the pdf'); 
    system.stderr.writeLine(' output : output when the pdf will be written'); 
    system.stderr.writeLine(' orientation : document orientation (either portrait or landscape'); 

    phantom.exit((args.length === 1 & args[0] === '--help') ? 0 : 1); 
} 

if (typeof args[2] !== 'undefined') { 
    if (-1 === ['portrait', 'landscape'].indexOf(args[2])) { 
     system.stderr.writeLine('Invalid argument for [orientation]'); 
     system.stderr.write('Expected either "portrait", either "landscape" ; got "' + args[2] + '"'); 

     phantom.exit(1); 
    } 

    orientation = args[2]; 
} 

var page = require('webpage').create(), 
    identifier = '___RENDER____'; 

page.paperSize = { format: 'A4', orientation: orientation, margin: '1cm' }; 

page.onInitialized = function() { 
    page.evaluate(function(identifier) { 
     document.addEventListener('pdfTrigger', function() { 
      console.log(identifier); 
     }, false); 
    }, identifier); 
}; 

page.onError = function (msg, trace) { 
    system.stderr.writeLine(msg); 

    trace.forEach(function(item) { 
     system.stderr.writeLine(' ' + item.file + ':' + item.line); 
    }); 

    phantom.exit(1); 
} 

page.onConsoleMessage = function (msg) { 
    console.log(msg); 

    if (msg !== identifier) { 
     return; 
    } 

    page.render(args[1], { format: 'pdf' }); 
    phantom.exit(0); 
} 

page.open(args[0], function (status) { 
    if (status !== 'success') { 
     system.stderr.write('Unable to load the file "' + args[0] + '"'); 
     phantom.exit(1); 
    } 
});

: 나는 (<script src="./jquery.min.css"></script> 같은) 로컬 리소스에 내 HTML 파일에 포함하는 경우, 여기

내가 사용하고있어 phantomjs 스크립트입니다 ... 오류가 사라하지만, 이벤트는 트리거되지 않습니다 내 스크립트를 시작하려면 다음 명령을 사용하고 있습니다. phantomjs rasterize.pdf test.html test.pdf

요약하면 Phantom에서 렌더링하려고 시도 할 때 html에서 외부의 것을로드 할 수없고 jQuery도 인식되지 않습니다. 아마도 다른 스크립트일까요?)

좋은 생각이야? 더 정확한 경우 필요하면 주저하지 마십시오.

출처

2014-04-03 Talus

변경 :

setTimeout(function() { 
    evt = document.createEvent('CustomEvent'); 
    evt.initEvent('pdfTrigger', true, false); 

    document.dispatchEvent(evt); 
}, 3000);

사람 :

window.onload = function() { 
    evt = document.createEvent('CustomEvent'); 
    evt.initEvent('pdfTrigger', true, false); 

    document.dispatchEvent(evt); 
};

는 그 이미지가 꽤 크기 때문에입니다 실패하고, 이미지가 제대로 다운로드되기 전에 당신이 PDF 이벤트를 트리거 한 이유 . onload 이벤트는 모든 페이지 리소스가로드 된 경우에만 실행되므로 window.onload을 사용하면 신뢰할 수 있습니다.

출처

2014-04-03 14:39:57 badsyntax

외부 리소스를로드하는 트릭을 수행 할 수 있지만 지금은 관련이없는 또 다른 문제가 있습니다. 'setTimeout'의 사용은 주어진 HTML이 실제로 내가 원하는 것을 상상할 수 있듯이, 단지 "내 웹 페이지에서 일하는 것"을 조롱하는 것입니다. 그래도 고마워. :) – Talus

그럼'window.onload = function() {setTimeout (function() {/ * 물건을 만든 다음 pdf 이벤트를 보내라. * /}, 3000); }; ' – badsyntax

그래, 다음 문제로 넘어 가기 위해 내가 염두에 두었던 것이다. :) – Talus

페이지를 렌더링 할 때 외부 리소스를로드 할 수 없습니다.

답변

관련 문제