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");  
        })
    },

最後效果爲：