feat:pdf查看

ZhangXianQiang

2024-05-17 bc20d71ea898413f5b2aeddf0bc023f993d7c1d3

feat:pdf查看

 package-lock.json

@@ -10,6 +10,7 @@
            "license": "AGPL-3.0",
            "dependencies": {
                "@lyno/lib-jitsi-meet": "^2.6726.2",
                "@vue-office/pdf": "^2.0.2",
                "axios": "^0.19.2",
                "clipboard": "^2.0.11",
                "codemirror": "^5.65.13",
@@ -31,6 +32,7 @@
                "script-loader": "^0.7.2",
                "vue": "^2.7.14",
                "vue-count-to": "^1.0.13",
                "vue-demi": "^0.14.7",
                "vue-router": "^3.6.5",
                "vuex": "^3.6.2",
                "xlsx": "^0.18.5"
@@ -2356,6 +2358,22 @@
            "dev": true,
            "engines": {
                "node": ">= 8"
            }
        },
        "node_modules/@vue-office/pdf": {
            "version": "2.0.2",
            "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-2.0.2.tgz",
            "integrity": "sha512-bQFqGxSOnKbvCS7OoJniYoTz1VIm1XOrRD27Msorxny9NFJ8RsQK1A4uhlnISJRFMaUwp1qlcVE9jMAhsiIyjg==",
            "hasInstallScript": true,
            "peerDependencies": {
                "@vue/composition-api": "^1.7.1",
                "vue": "^2.0.0 || >=3.0.0",
                "vue-demi": "^0.14.6"
            },
            "peerDependenciesMeta": {
                "@vue/composition-api": {
                    "optional": true
                }
            }
        },
        "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
@@ -16971,6 +16989,28 @@
            "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",
            "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
        },
        "node_modules/vue-demi": {
            "version": "0.14.7",
            "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
            "hasInstallScript": true,
            "bin": {
                "vue-demi-fix": "bin/vue-demi-fix.js",
                "vue-demi-switch": "bin/vue-demi-switch.js"
            },
            "engines": {
                "node": ">=12"
            },
            "peerDependencies": {
                "@vue/composition-api": "^1.0.0-rc.1",
                "vue": "^3.0.0-0 || ^2.6.0"
            },
            "peerDependenciesMeta": {
                "@vue/composition-api": {
                    "optional": true
                }
            }
        },
        "node_modules/vue-eslint-parser": {
            "version": "5.0.0",
            "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",
@@ -20177,6 +20217,12 @@
                    "dev": true
                }
            }
        },
        "@vue-office/pdf": {
            "version": "2.0.2",
            "resolved": "https://registry.npmmirror.com/@vue-office/pdf/-/pdf-2.0.2.tgz",
            "integrity": "sha512-bQFqGxSOnKbvCS7OoJniYoTz1VIm1XOrRD27Msorxny9NFJ8RsQK1A4uhlnISJRFMaUwp1qlcVE9jMAhsiIyjg==",
            "requires": {}
        },
        "@vue/babel-helper-vue-jsx-merge-props": {
            "version": "1.4.0",
@@ -32341,6 +32387,12 @@
            "resolved": "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz",
            "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
        },
        "vue-demi": {
            "version": "0.14.7",
            "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz",
            "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
            "requires": {}
        },
        "vue-eslint-parser": {
            "version": "5.0.0",
            "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz",

 package.json

@@ -36,6 +36,7 @@
    },
    "dependencies": {
        "@lyno/lib-jitsi-meet": "^2.6726.2",
        "@vue-office/pdf": "^2.0.2",
        "axios": "^0.19.2",
        "clipboard": "^2.0.11",
        "codemirror": "^5.65.13",
@@ -57,6 +58,7 @@
        "script-loader": "^0.7.2",
        "vue": "^2.7.14",
        "vue-count-to": "^1.0.13",
        "vue-demi": "^0.14.7",
        "vue-router": "^3.6.5",
        "vuex": "^3.6.2",
        "xlsx": "^0.18.5"

 src/views/onlineStudy/file.vue

@@ -38,7 +38,7 @@
          <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent" />
          <el-link type="primary" v-if="scope.row.contentType === 'pdf'" :src="'/api/files/' + scope.row.contentUrl.url"
            class="showContent">点击查看</el-link>
            class="showContent" @click="checkPdf">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="attachment" label="附件">
@@ -94,6 +94,11 @@
        <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>

@@ -102,9 +107,11 @@
import OnlineStudyAPI from '@/api/online-study';
import StudyTypeAPI from '@/api/study-type';
import Upload from '@/components/UploadC';

import VueOfficePdf from '@vue-office/pdf';
export default {
  name: 'type',
  components: { Upload, Pagination },
  components: { Upload, Pagination, VueOfficePdf },
  computed: {
    fileContentUrl: () => {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
@@ -112,6 +119,7 @@
  },
  data() {
    return {
      pdf: '',
      dialogTitle: '添加学习内容',
      ids: [],
      typeList: [],
@@ -123,6 +131,7 @@
      total: 0,
      tableData: [],
      open: false,
      pdfDialog: false,
      form: {
        contentType: 'video',
        subject: '',
@@ -148,6 +157,16 @@
    };
  },
  methods: {
    checkPdf() {
      this.pdf = 'http://static.shanhuxueyuan.com/test.pdf';
      this.pdfDialog = true;
    },
    closePdfDialog() {
      this.pdfDialog = false;
    },
    rendered() {

    },
    fileChange() {
      this.form.contentUrl = [];
    },
@@ -236,7 +255,7 @@
        contentUrl: [],
        attachment: [],
        temp: []
      }
      };
    },
    handleClose() {
      this.open = false;