2017-03-01 8 views
3

ハードコードされたURLを使用したこの単純な例では、Vue.jsコンポーネントがレンダリングされないため、プレーンhtmlがレンダリングされます。Phantom.jsを使用してPDFを生成しようとしたときにVue.jsがレンダリングされない

Phantom.jsはVue.jsで正常に動作するはずですか?

var webPage = require('webpage'); 
var page = webPage.create(); 

page.viewportSize = { width: 1920, height: 1080 }; 
page.open("-----------", function start(status) { 
    page.render('test.jpeg', {format: 'jpeg', quality: '100'}); 
    phantom.exit(); 
}); 

テストを支援したい人のためのクイックビューコード。

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://cdn.jsdelivr.net/vue/latest/vue.js" charset="utf-8"></script> 
     <style media="screen"> body { background-color: grey; } </style> 
    </head> 
    <body> 
     plain text before vue 
     <div id="app" v-text="title" /> 
     plain text after vue 
     <script type="text/javascript"> 
      const app = new Vue({ el : '#app', data() { return { title : 'Vue Title' } } }); 
     </script> 
    </body> 
</html> 
+0

試してみたい人には、phantom.jsをインストールしてex:text.jsを作成し、端末に電話をかけてください。 phantomjs test.js – marceloch2

+1

私はvuejsとwkhtmltopdfにも問題があります。 – Nick

+0

@ニックあなたは、サーバー側のレンダリングに変更すると、あなたのvueがpdf生成で正常に動作すると思います。私の場合、私はssrのために今変更することはできません。 可能であれば、私はあなたのpdfが動作することをほとんど確信しています。 – marceloch2

答えて

0

あなたのファントムのバージョンを確認してください。 Phantomjs Version 2.xはvuejsでうまく動作します。

phantomjsが動作しすぎて、コードのその部分に到達しても要素がまだ利用できない可能性があります。要素にアクセスする前に、waitForElementまたはwaitを使用して遅延を誘発してください。

+0

こんにちは@宝石おかげで。しかし、いくつかのアプローチで試してみた[link](http://stackoverflow.com/questions/16807212/how-to-wait-for-element-visibility-in-phantomjs#19070446)。 しかし、運がない、同じ結果。 – marceloch2

関連する問題