vue pdf预览禁止打印

长春小霸王

于 2022-04-19 16:39:48 发布

阅读量697

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/jbossjf/article/details/124277400

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在Vue.js应用中利用pdfobject库来加载并展示PDF文件。首先通过npm安装pdfobject，然后在组件中导入并使用它。在创建钩子中，根据查询参数从API获取PDF文件路径，并使用pdfobject的embed方法将其嵌入到页面指定的div中。同时，博客还包含了阻止文本选择和鼠标右键功能的代码，以优化用户体验。

摘要由CSDN通过智能技术生成

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.query
    this.id = query.id
    if (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>