chenrui
/
zdxtLawEnforcementCodeView
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

pdf预览

v4
yanyan 1 year ago
parent
7e7b2b718a
commit
1a412e508a
4 changed files with 239 additions and 48 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 97
      package-lock.json
  2. 3
      package.json
  3. 95
      src/views/enforce/enforceNoticeDetail.vue
  4. 92
      src/views/enterprise/systemNoticeDetail.vue

97
package-lock.json
View File

@ -34,9 +34,10 @@
"vue-dompurify-html": "^5.0.1", "vue-dompurify-html": "^5.0.1",
"vue-i18n": "^9.9.1", "vue-i18n": "^9.9.1",
"vue-pdf": "^1.0.0", "vue-pdf": "^1.0.0",
"vue-pdf-embed": "^2.0.3", "vue-pdf-embed": "^1.2.1",
"vue-qrcode-reader": "^5.5.3", "vue-qrcode-reader": "^5.5.3",
"vue-router": "^4.3.0", "vue-router": "^4.3.0",
"vue3-pdfjs": "^0.1.6",
"weixin-js-sdk": "^1.6.5" "weixin-js-sdk": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {
@ -6242,6 +6243,12 @@
"url": "https://github.com/fb55/domhandler?sponsor=1" "url": "https://github.com/fb55/domhandler?sponsor=1"
} }
}, },
"node_modules/dommatrix": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
"integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww==",
"deprecated": "dommatrix is no longer maintained. Please use @thednp/dommatrix."
},
"node_modules/dompurify": { "node_modules/dompurify": {
"version": "3.2.5", "version": "3.2.5",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
@ -14816,14 +14823,11 @@
"integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw==" "integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw=="
}, },
"node_modules/vue-pdf-embed": { "node_modules/vue-pdf-embed": {
"version": "2.1.2", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-1.2.1.tgz",
"integrity": "sha512-/j++oknFBY9x/MgEFBo9tSuOXS0Z9COlywwLhMREhiGfmuQqpnGy5T+SwVIXxR1tmdzM/lHog8JL7HOAgXT1aw==", "integrity": "sha512-4uUm4wxaEGT9cS1cyuagAmMJjBxfQXWG1MvdGPesD3CiXhhSp4i0VMUCYwhFXtZ5+QqWv4mXbfLJ29Wpt+Qcuw==",
"dependencies": {
"pdfjs-dist": "^4.10.38"
},
"peerDependencies": { "peerDependencies": {
"vue": "^3.3.0" "vue": "^2.x || ^3.x"
} }
}, },
"node_modules/vue-qrcode-reader": { "node_modules/vue-qrcode-reader": {
@ -14852,6 +14856,35 @@
"vue": "^3.2.0" "vue": "^3.2.0"
} }
}, },
"node_modules/vue3-pdfjs": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/vue3-pdfjs/-/vue3-pdfjs-0.1.6.tgz",
"integrity": "sha512-7UaWbsp8wNqB0y/rRlyo5yRb0S+XOkkSpmdUuS267Dhi07Pt4RFEetQ8inrpf/aTFJwGnW0Uc/UE4p376s+Zmw==",
"dependencies": {
"pdfjs-dist": "^2.10.377",
"vue": "^3.2.19"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/vue3-pdfjs/node_modules/pdfjs-dist": {
"version": "2.16.105",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
"integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
"dependencies": {
"dommatrix": "^1.0.3",
"web-streams-polyfill": "^3.2.1"
},
"peerDependencies": {
"worker-loader": "^3.0.8"
},
"peerDependenciesMeta": {
"worker-loader": {
"optional": true
}
}
},
"node_modules/w3c-xmlserializer": { "node_modules/w3c-xmlserializer": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@ -14886,6 +14919,14 @@
"defaults": "^1.0.3" "defaults": "^1.0.3"
} }
}, },
"node_modules/web-streams-polyfill": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
"engines": {
"node": ">= 8"
}
},
"node_modules/webidl-conversions": { "node_modules/webidl-conversions": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@ -19777,6 +19818,11 @@
"domelementtype": "^2.3.0" "domelementtype": "^2.3.0"
} }
}, },
"dommatrix": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
"integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
},
"dompurify": { "dompurify": {
"version": "3.2.5", "version": "3.2.5",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.5.tgz",
@ -26183,12 +26229,10 @@
"integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw==" "integrity": "sha512-jnwYXe5yZcW+26VzLX3Pvo9kt+yWZMEk7P5SFgJ+KT7q2cVPZn3XQGpjQ+19FsD6VWO4BHpEx64kslTOMuZSOw=="
}, },
"vue-pdf-embed": { "vue-pdf-embed": {
"version": "2.1.2", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-2.1.2.tgz", "resolved": "https://registry.npmjs.org/vue-pdf-embed/-/vue-pdf-embed-1.2.1.tgz",
"integrity": "sha512-/j++oknFBY9x/MgEFBo9tSuOXS0Z9COlywwLhMREhiGfmuQqpnGy5T+SwVIXxR1tmdzM/lHog8JL7HOAgXT1aw==", "integrity": "sha512-4uUm4wxaEGT9cS1cyuagAmMJjBxfQXWG1MvdGPesD3CiXhhSp4i0VMUCYwhFXtZ5+QqWv4mXbfLJ29Wpt+Qcuw==",
"requires": { "requires": {}
"pdfjs-dist": "^4.10.38"
}
}, },
"vue-qrcode-reader": { "vue-qrcode-reader": {
"version": "5.5.3", "version": "5.5.3",
@ -26207,6 +26251,26 @@
"@vue/devtools-api": "^6.5.1" "@vue/devtools-api": "^6.5.1"
} }
}, },
"vue3-pdfjs": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/vue3-pdfjs/-/vue3-pdfjs-0.1.6.tgz",
"integrity": "sha512-7UaWbsp8wNqB0y/rRlyo5yRb0S+XOkkSpmdUuS267Dhi07Pt4RFEetQ8inrpf/aTFJwGnW0Uc/UE4p376s+Zmw==",
"requires": {
"pdfjs-dist": "^2.10.377",
"vue": "^3.2.19"
},
"dependencies": {
"pdfjs-dist": {
"version": "2.16.105",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
"integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
"requires": {
"dommatrix": "^1.0.3",
"web-streams-polyfill": "^3.2.1"
}
}
}
},
"w3c-xmlserializer": { "w3c-xmlserializer": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
@ -26235,6 +26299,11 @@
"defaults": "^1.0.3" "defaults": "^1.0.3"
} }
}, },
"web-streams-polyfill": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw=="
},
"webidl-conversions": { "webidl-conversions": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

3
package.json
View File

@ -41,9 +41,10 @@
"vue-dompurify-html": "^5.0.1", "vue-dompurify-html": "^5.0.1",
"vue-i18n": "^9.9.1", "vue-i18n": "^9.9.1",
"vue-pdf": "^1.0.0", "vue-pdf": "^1.0.0",
"vue-pdf-embed": "^2.0.3", "vue-pdf-embed": "^1.2.1",
"vue-qrcode-reader": "^5.5.3", "vue-qrcode-reader": "^5.5.3",
"vue-router": "^4.3.0", "vue-router": "^4.3.0",
"vue3-pdfjs": "^0.1.6",
"weixin-js-sdk": "^1.6.5" "weixin-js-sdk": "^1.6.5"
}, },
"devDependencies": { "devDependencies": {

95
src/views/enforce/enforceNoticeDetail.vue
View File

@ -10,22 +10,41 @@
<label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label> <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
</div> </div>
<div class="zoom"> <div class="zoom">
<img
v-for="(ite, index) in data.images" <div v-for="(ite, index) in data.images" >
class="img" <!-- <img alt="预览文件" :src="ite" @click="handleViewPdf(ite)"/>-->
:src="ite" <!-- <van-uploader @click="handleViewPdf(ite)" title="pdf预览" v-model="data.fileList"/>-->
alt="预览图片" <van-icon @click="handleViewPdf(ite)" name="newspaper-o" title="pdf预览" size="50"></van-icon>{{data.imagesName[index]}}
@click="imagePreview(index)" </div>
:key="index" <!-- pdf预览 -->
/> <van-popup v-model:show="pdfOpen" title="'pdf预览'" style="width:80%" >
<van-image-preview <div style="min-height: 439px" >
v-model:show="data.show" <vue-pdf-embed ref="pdfRef" v-if="!pdfFail" :source="pdfSrc" @rendered="handleDocumentRender" @loading-failed="handlePdfFaid" />
:images="data.imageList" </div>
@change="onChange"
ref="imagePre" <a :href="data.pdfSource" class="loadPdf" target="_blank">
> <van-button type="primary" icon="Download" plain>下载</van-button>
<template v-slot:index>第{{ indexImg + 1 }}页</template> </a>
</van-image-preview> <van-button @click="pdfOpen = false" type="primary" class="closePdf">关 闭</van-button>
</van-popup>
<!-- <img-->
<!-- v-for="(ite, index) in data.images"-->
<!-- class="img"-->
<!-- :src="ite"-->
<!-- alt="预览图片"-->
<!-- @click="imagePreview(index)"-->
<!-- :key="index"-->
<!-- />-->
<!-- <van-image-preview-->
<!-- v-model:show="data.show"-->
<!-- :images="data.imageList"-->
<!-- @change="onChange"-->
<!-- ref="imagePre"-->
<!-- >-->
<!-- <template v-slot:index>第{{ indexImg + 1 }}页</template>-->
<!-- </van-image-preview>-->
</div> </div>
</div> </div>
@ -34,6 +53,7 @@
</template> </template>
<script setup name="register"> <script setup name="register">
import VuePdfEmbed from "vue-pdf-embed";
import {showSuccessToast, showImagePreview} from "vant"; import {showSuccessToast, showImagePreview} from "vant";
import { import {
queryEnforcementRegistrationById, queryEnforcementRegistrationById,
@ -80,6 +100,7 @@ const data = reactive({
objectType: "", objectType: "",
createTime: "", createTime: "",
images: "", images: "",
imagesName:"",
}); });
//保存参数 //保存参数
const submitData = reactive({ const submitData = reactive({
@ -135,6 +156,31 @@ const submitData = reactive({
problem5: 0, problem5: 0,
}); });
const pdfOpen = ref(false);
const isLoading = ref(true);
const pdfSrc = ref('');
const pdfFail = ref(false);
// pdf加载
function handleDocumentRender(val) {
isLoading.value = false;
pdfFail.value = false;
}
// pdf加载失败，或者404
function handlePdfFaid(val) {
isLoading.value = false;
pdfFail.value = true;
console.log('文档加载失败');
}
// 点击 预览
function handleViewPdf(file) {
isLoading.value = true;
pdfOpen.value = true;
// pdfSrc.value = file;
pdfSrc.value = file;
pdfFail.value = false;
}
const tapGood = () => { const tapGood = () => {
data.good = "#7FFFD4"; data.good = "#7FFFD4";
data.bad = "#D3D3D3"; data.bad = "#D3D3D3";
@ -303,15 +349,21 @@ const convertReg = (regs) => {
(success) => { (success) => {
if (success.data.filePreview != null) { if (success.data.filePreview != null) {
let images = []; let images = [];
let imagesName = [];
for (const key in success.data.filePreview.fileList) { for (const key in success.data.filePreview.fileList) {
images[key] = baseUrl + success.data.filePreview.fileList[key]; images[key] = baseUrl + success.data.filePreview.fileList[key];
data.imageList.push( data.imageList.push(
baseUrl + success.data.filePreview.fileList[key] baseUrl + success.data.filePreview.fileList[key]
); );
} }
for (const key in success.data.filePreview.previewRespDTOS) {
imagesName[key] = success.data.filePreview.previewRespDTOS[key].caption;
}
data.imagesName = imagesName;
data.images = images; data.images = images;
} }
console.log(data.imageList); console.log(data.imageList);
}, },
(error) => { (error) => {
@ -405,6 +457,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.loadPdf {
position: absolute;
top: 6px;
right: 22%;
}
.closePdf {
position: absolute;
top: 6px;
right: 0.5%;
}
.address_edit { .address_edit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

92
src/views/enterprise/systemNoticeDetail.vue
View File

@ -10,22 +10,39 @@
<label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label> <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
</div> </div>
<div class="zoom"> <div class="zoom">
<img <div v-for="(ite, index) in data.images" >
v-for="(ite, index) in data.images" <!-- <img alt="预览文件" :src="ite" @click="handleViewPdf(ite)"/>-->
class="img" <!-- <van-uploader @click="handleViewPdf(ite)" title="pdf预览" v-model="data.fileList"/>-->
:src="ite" <van-icon @click="handleViewPdf(ite)" name="newspaper-o" title="pdf预览" size="50"></van-icon>{{data.imagesName[index]}}
alt="预览图片" </div>
@click="imagePreview(index)" <!-- pdf预览 -->
:key="index" <van-popup v-model:show="pdfOpen" title="'pdf预览'" style="width:80%" >
/> <div style="min-height: 439px" >
<van-image-preview <vue-pdf-embed ref="pdfRef" v-if="!pdfFail" :source="pdfSrc" @rendered="handleDocumentRender" @loading-failed="handlePdfFaid" />
v-model:show="data.show" </div>
:images="data.imageList"
@change="onChange" <a :href="data.pdfSource" class="loadPdf" target="_blank">
ref="imagePre" <van-button type="primary" icon="Download" plain>下载</van-button>
> </a>
<template v-slot:index>第{{ indexImg + 1 }}页</template> <van-button @click="pdfOpen = false" type="primary" class="closePdf">关 闭</van-button>
</van-image-preview>
</van-popup>
<!-- <img-->
<!-- v-for="(ite, index) in data.images"-->
<!-- class="img"-->
<!-- :src="ite"-->
<!-- alt="预览图片"-->
<!-- @click="imagePreview(index)"-->
<!-- :key="index"-->
<!-- />-->
<!-- <van-image-preview-->
<!-- v-model:show="data.show"-->
<!-- :images="data.imageList"-->
<!-- @change="onChange"-->
<!-- ref="imagePre"-->
<!-- >-->
<!-- <template v-slot:index>第{{ indexImg + 1 }}页</template>-->
<!-- </van-image-preview>-->
</div> </div>
</div> </div>
@ -46,6 +63,7 @@ import {queryLinkageById} from "@/api/linkage";
import {baseUrl} from "@/config/env"; import {baseUrl} from "@/config/env";
import VuePdfEmbed from "vue-pdf-embed";
//用户筛选弹窗 //用户筛选弹窗
// import Popup from './userFilter.vue'; // import Popup from './userFilter.vue';
@ -80,6 +98,7 @@ const data = reactive({
objectType: "", objectType: "",
createTime: "", createTime: "",
images: "", images: "",
imagesName:"",
}); });
//保存参数 //保存参数
const submitData = reactive({ const submitData = reactive({
@ -134,7 +153,30 @@ const submitData = reactive({
problem4: 0, problem4: 0,
problem5: 0, problem5: 0,
}); });
const pdfOpen = ref(false);
const isLoading = ref(true);
const pdfSrc = ref('');
const pdfFail = ref(false);
// pdf加载
function handleDocumentRender(val) {
isLoading.value = false;
pdfFail.value = false;
}
// pdf加载失败，或者404
function handlePdfFaid(val) {
isLoading.value = false;
pdfFail.value = true;
console.log('文档加载失败');
}
// 点击 预览
function handleViewPdf(file) {
isLoading.value = true;
pdfOpen.value = true;
// pdfSrc.value = file;
pdfSrc.value = file;
pdfFail.value = false;
}
const tapGood = () => { const tapGood = () => {
data.good = "#7FFFD4"; data.good = "#7FFFD4";
data.bad = "#D3D3D3"; data.bad = "#D3D3D3";
@ -303,12 +345,17 @@ const convertReg = (regs) => {
(success) => { (success) => {
if (success.data.filePreview != null) { if (success.data.filePreview != null) {
let images = []; let images = [];
let imagesName = [];
for (const key in success.data.filePreview.fileList) { for (const key in success.data.filePreview.fileList) {
images[key] = baseUrl + success.data.filePreview.fileList[key]; images[key] = baseUrl + success.data.filePreview.fileList[key];
data.imageList.push( data.imageList.push(
baseUrl + success.data.filePreview.fileList[key] baseUrl + success.data.filePreview.fileList[key]
); );
} }
for (const key in success.data.filePreview.previewRespDTOS) {
imagesName[key] = success.data.filePreview.previewRespDTOS[key].caption;
}
data.imagesName = imagesName;
data.images = images; data.images = images;
} }
@ -405,6 +452,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.loadPdf {
position: absolute;
top: 6px;
right: 22%;
}
.closePdf {
position: absolute;
top: 6px;
right: 0.5%;
}
.address_edit { .address_edit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

Write Preview
Loading…
Cancel
Save