Question

我正在使用Vue.js并具有要制作为PDF的模板（HTML），然后将该PDF制作为Blob，然后对该Blob进行操作。在我的示例代码中，当单击“打印表单” 按钮时，调用“ printPdf” 函数，只有一行代码“ window.print（） “ 事件，并立即调用“ onbeforeprint” 事件。这就是我希望以某种方式创建PDF然后使其成为Blob的地方。

<template>
    <div class="hello">
        <form method="post"
            action="#"
            id="printJS-form">

            <h1>PDF Test</h1>
            <ul>
                <li><a href="https://router.vuejs.org"
                        target="_blank"
                        rel="noopener">vue-router</a></li>
                <li><a href="https://vuex.vuejs.org"
                        target="_blank"
                        rel="noopener">vuex</a></li>
                <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools"
                        target="_blank"
                        rel="noopener">vue-devtools</a></li>
                <li><a href="https://vue-loader.vuejs.org"
                        target="_blank"
                        rel="noopener">vue-loader</a></li>
                <li><a href="https://github.com/vuejs/awesome-vue"
                        target="_blank"
                        rel="noopener">awesome-vue</a></li>
            </ul>
        </form>
        <button type="button"
            v-on:click="printPdf">
            Print Form
        </button>
    </div>
</template>

<script>

export default {
    name: 'print-pdf-tets',
    props: {
        msg: String
    },
    created() {
        window.onbeforeprint = () => {

            // get PDF and make it to blob

        };
    },
    methods: {
        printPdf() {
            // enters here first, and calls onbeforeprint event
            window.print();
            // close window
        },
    }
}
</script>
<style scoped>
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

我的想法不是打印PDF，而是使其打印成斑点。因此，整个操作过程都将对用户隐藏。那就是我的问题：

如何从HTML创建PDF，然后使该PDF成为blob？

JS从HTML生成的PDF中生成斑点

0 个答案: