pdf

xiangpei

2024-05-17 b60049c4fd341d6a0d109408aa998e02528fc6d6

pdf

 src/components/PDF.vue

New file
@@ -0,0 +1,30 @@
<template>
  <div>
    <vue-office-pdf :src="pdfUrl" @rendered="rendered" />
  </div>
</template>

<script>
import VueOfficePdf from '@vue-office/pdf';
export default {
  name: "PDF",
  components: { VueOfficePdf },
  data() {
    return {
      pdfUrl: ''
    }
  },
  methods: {
    rendered() {

    },
  },
  mounted() {
    this.pdfUrl = this.$route.query.pdfUrl
  }
}
</script>

<style scoped>

</style>

 src/router.js

@@ -113,6 +113,12 @@
        component: () => import('@/views/onlineStudy/file'),
        name: 'File',
        meta: { title: '学习文件', noCache: true }
      },
      {
        path: 'pdf/view',
        component: () => import('@/components/PDF'),
        name: 'PDFView',
        meta: { title: 'PDF查看', noCache: true }
      }
    ]
  },

 src/views/onlineStudy/file.vue

@@ -94,11 +94,6 @@
        <el-button type="primary" @click="handlerSubmit">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="PDF查看" :visible.sync="pdfDialog" width="80%" :before-close="closePdfDialog">
      <vue-office-pdf :src="pdf" @rendered="rendered" />
    </el-dialog>

  </div>
</template>

@@ -108,10 +103,9 @@
import StudyTypeAPI from '@/api/study-type';
import Upload from '@/components/UploadC';

import VueOfficePdf from '@vue-office/pdf';
export default {
  name: 'type',
  components: { Upload, Pagination, VueOfficePdf },
  components: { Upload, Pagination },
  computed: {
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
@@ -119,7 +113,6 @@
  },
  data() {
    return {
      pdf: '',
      dialogTitle: '添加学习内容',
      ids: [],
      typeList: [],
@@ -158,14 +151,10 @@
  },
  methods: {
    checkPdf(url) {
      this.pdf = url;
      this.pdfDialog = true;
      window.open('/#/online/study/pdf/view?pdfUrl=' + url, '_blank')
    },
    closePdfDialog() {
      this.pdfDialog = false;
    },
    rendered() {

    },
    fileChange() {
      this.form.contentUrl = [];