vue中使用PDFObject打印

原生window.print()

直接使用window.print(),只会打印标签的内容（整个页面）,对于pdf的url里面的内容是打印不出的，这时候需要借助iframe标签

<iframe style="display:none" id="printIframe" src="<%=data%>"></iframe>

$(document).ready(function(){
          doPrint();
});
//点击打印按钮，触发事件】
function doPrint(){
    $("#printIframe")[0].contentWindow.print();
}
</script>

pdfobject 插件

此插件不仅可以预览pdf,word等同样适用

1.安装

npm i pdfobject --save

2.引入

import pdf from 'pdfobject'

3.指定元素与样式

<template>
    <div id="pdf-content">
    </div>
</template>


<style lang="scss" scoped>
#pdf-content{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 20%;
    background: #999;
}
</style>

4.嵌入元素

    beforeMount() {
        pdf.embed("../../static/pdf.pdf", "#pdf-content");  
    },

但是浏览器会报错：

error:
[PDFObject] Target element cannot be determined

5.修改代码为

    beforeMount() {
        this.$nextTick(function () {
            pdf.embed("../../static/pdf.pdf", "#pdf-content");  
        })
    },

最后效果为：