From bc20d71ea898413f5b2aeddf0bc023f993d7c1d3 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 17 五月 2024 11:10:07 +0800
Subject: [PATCH] feat:pdf查看
---
package-lock.json | 52 ++++++++++++++++++++++++++
src/views/onlineStudy/file.vue | 25 +++++++++++-
package.json | 2 +
3 files changed, 76 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 55debe8..33922a2 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 6f58441..8222793 100644
--- a/package.json
+++ b/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"
diff --git a/src/views/onlineStudy/file.vue b/src/views/onlineStudy/file.vue
index 668b580..3a4e60d 100644
--- a/src/views/onlineStudy/file.vue
+++ b/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;
--
Gitblit v1.8.0