web预览pdf并打印

最新推荐文章于 2024-05-07 01:11:12 发布

超，不学了

最新推荐文章于 2024-05-07 01:11:12 发布

阅读量436

点赞数 9

文章标签：前端 pdf html vue.js

本文链接：https://blog.csdn.net/qq_48881427/article/details/135151879

版权

方案一

使用pdfjs

<body>
    <div id="app">
        <canvas id="myCanvas"></canvas>
        <button @click="print">打印</button>
 </div>
 <script src="./vue.min.js"></script>
 <script src="./pdfjs/build/pdf.mjs" type="module"></script>
 <script src="./pdfjs/build//pdf.worker.mjs" type="module"> </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/print-js/1.6.0/print.min.css">

 <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            created() {

            },
            mounted() {

            },
            methods: {
                print() {
                    printJS({
                        printable: './未命名1_加水印.pdf'
                    })
                },
            }

        })
</script>
<script type="module">
        let data = './未命名1_加水印.pdf'
        var loadingTask = pdfjsLib.getDocument(data)
        loadingTask.promise.then(function (pdf) {
            for (var i = 1; i <= pdf.numPages; i++) {
                pdf.getPage(1).then(function (page) {
                    var scale = 2
                    var viewport = page.getViewport({ scale: scale })

                    var canvas = document.getElementById('myCanvas')
                    var context = canvas.getContext('2d')
                    canvas.height = viewport.height
                    canvas.width = viewport.width

                    var renderContext = {
                        canvasContext: context,
                        viewport: viewport,
                    };
                    page.render(renderContext);
                })
            }
        });
 </script>
</body>
</html>

方案二

embed标签