1、肯定是先安裝了：

npm i pdfobject --save

2、引入

import pdf from 'pdfobject'

<template><div><p class="over" /><div id="pdf-content"><el-container class="container" @contextmenu.native="handlePaste($event)" /></div></div> </template> <script> import pdf from 'pdfobject' import {GetStudentExaminationBuild} from '@/api/student_examination' export default {name: 'ViewPDF',props: {pdfUrl: {type: String,default: ''}},data() {return {id: '',PdfWebPath: '',pdfTop: 40,showTips: true}},created() {// 禁止選擇網頁中的文字document.onselectstart = function() {return false}// 禁止鼠標右鍵功能document.oncontextmenu = function() {return false}var query = this.$route.querythis.id = query.idif (query.type == 'stuent_examination') {GetStudentExaminationBuild({id: this.id}).then(response => {// alert(response.WebPath)var options = {height: '10000px',pdfOpenParams: {scrollbars: '0',toolbar: '0',statusbar: '0'} // 禁用工具欄代碼}pdf.embed(response.WebPath,'#pdf-content', options)})}},mounted() {// this.PdfWebPath = query.bean.studentExaminationBuild.webPath},methods: {handlePaste(event) {// 禁用鼠標右鍵event.preventDefault()return false}}// beforeMount() {// var that = this;// that.$nextTick(function() {// pdf.embed(that.pdfUrl, "#pdf-content");// })// },} </script><style>#pdf{width:100%;height: 100%;margin: 0;padding: 0;}.over{width:100%;height: 100%;background-color: rgba(1,1,1,0);position: fixed;top:0px;left:0px;}</style>

總結

以上是生活随笔為你收集整理的vue pdf预览禁止打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。