Vue.js not rendering when trying to generate a PDF using Phantom.js

China☆狼群 提交于 2021-02-07 14:51:14

问题


In this simple example with hardcoded url my Vue.js components not rendering, plain html get rendered but all places i have a component appear blank.

Phantom.js should work normally with 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();
});

Quick vue code for who want to help and do the test.

<!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>

回答1:


Check your phantomjs version. Phantomjs Version 2.x would work just fine with vuejs.

It's possible that phantomjs is running too quick that the element is not yet available when it reach that part of the code. Use waitForElement or wait to induce a delay before trying to access the element.



来源:https://stackoverflow.com/questions/42537570/vue-js-not-rendering-when-trying-to-generate-a-pdf-using-phantom-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!