Skip to content

C
cert-show-h5
提交 248f7746 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

fix: 解决pdf下载问题

上级 88eaadc9
隐藏空白字符变更
内嵌 并排
正在显示 包含 41 行增加 和 86 行删除
.eslintrc
浏览文件 @ 248f7746
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"webConf": false, "webConf": false,
"Blob": false, "Blob": false,
"Image": false, "Image": false,
"MouseEvent": false "MouseEvent": false,
"XMLHttpRequest": false
} }
} }
package-lock.json
浏览文件 @ 248f7746
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"html2canvas": "*", "html2canvas": "*",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"js-file-download": "^0.4.12",
"jspdf": "^2.3.1", "jspdf": "^2.3.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"vue": "^2.6.12", "vue": "^2.6.12",
...@@ -7532,6 +7533,11 @@ ...@@ -7532,6 +7533,11 @@
"resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz", "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg=" "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
}, },
"node_modules/js-file-download": {
"version": "0.4.12",
"resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
"integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
},
"node_modules/js-tokens": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz", "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
...@@ -20279,6 +20285,11 @@ ...@@ -20279,6 +20285,11 @@
"resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz", "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg=" "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
}, },
"js-file-download": {
"version": "0.4.12",
"resolved": "https://registry.npmjs.org/js-file-download/-/js-file-download-0.4.12.tgz",
"integrity": "sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg=="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz", "resolved": "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz?cache=0&sync_timestamp=1586796305651&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-tokens%2Fdownload%2Fjs-tokens-4.0.0.tgz",
......
package.json
浏览文件 @ 248f7746
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"html2canvas": "*", "html2canvas": "*",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"js-file-download": "^0.4.12",
"jspdf": "^2.3.1", "jspdf": "^2.3.1",
"lodash": "^4.17.20", "lodash": "^4.17.20",
"vue": "^2.6.12", "vue": "^2.6.12",
......
src/pages/shms/certs/index.vue
浏览文件 @ 248f7746
...@@ -7,81 +7,9 @@ ...@@ -7,81 +7,9 @@
<div class="down-btn" @click="downPdf">{{ $t('shmsLang.downloadBtn') }}</div> <div class="down-btn" @click="downPdf">{{ $t('shmsLang.downloadBtn') }}</div>
</div> </div>
<template v-if="imgUrl"> <template v-if="imgUrl">
<vue-html2pdf <div class="certs-img">
:show-layout="false" <img :src="setUrl(imgUrl)" />
:float-layout="false" </div>
:enable-download="true"
:preview-modal="false"
:manual-pagination="true"
pdf-orientation="landscape"
:paginate-elements-by-height="1500"
filename="file"
pdf-content-width="100%"
ref="html2Pdf"
>
<section slot="pdf-content">
<div class="certs-img" style="position: relative">
<img :src="setUrl(imgUrl)" width="100%" />
<span style="opacity: 0">
Have ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave
ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas
to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideaimprove npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improveimprove
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve
npmHave ideas to improve npmHave ideas to improves to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to
improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to improve npmHave ideas to</span
>
</div>
</section>
</vue-html2pdf>
</template> </template>
<template v-else> <template v-else>
<div class="null"> <div class="null">
...@@ -92,10 +20,10 @@ ...@@ -92,10 +20,10 @@
</div> </div>
</template> </template>
<script> <script>
import VueHtml2pdf from 'vue-html2pdf'
import * as api from '@/api/account.js' import * as api from '@/api/account.js'
import httpRequest from '@/utils/axios'
import fileDownload from 'js-file-download'
export default { export default {
components: { VueHtml2pdf },
data() { data() {
return { return {
options: [], options: [],
...@@ -121,7 +49,7 @@ export default { ...@@ -121,7 +49,7 @@ export default {
}, },
downPdf() { downPdf() {
if (this.pdfUrl) { if (this.pdfUrl) {
this.$refs.html2Pdf.generatePdf() this.download()
} else { } else {
this.$message({ this.$message({
message: 'No certificate, unable to download', message: 'No certificate, unable to download',
...@@ -129,14 +57,26 @@ export default { ...@@ -129,14 +57,26 @@ export default {
}) })
} }
}, },
download() {
const requestUrl = this.pdfUrl.substring(this.pdfUrl.indexOf('/files/'), this.pdfUrl.length)
httpRequest
.get(`/api/certs${requestUrl}`, {
responseType: 'blob'
})
.then(res => {
fileDownload(res, 'filename.pdf')
console.log(res)
})
},
changes() { changes() {
this.imgUrl = '' this.imgUrl = ''
this.pdfUrl = '' this.pdfUrl = ''
api api
.getCerts({ project_id: this.value }) .getCerts({ project_id: this.value })
.then(response => { .then(response => {
this.imgUrl = response.data.image_url const data = response.data
this.pdfUrl = response.data.pdf_url this.imgUrl = data.image_url
this.pdfUrl = data.pdf_url
}) })
.finally(() => {}) .finally(() => {})
}, },
...@@ -144,8 +84,9 @@ export default { ...@@ -144,8 +84,9 @@ export default {
api api
.getCondition() .getCondition()
.then(response => { .then(response => {
this.options = response.data.get_certificate_info.project_map const data = response.data.get_certificate_info
this.value = response.data.get_certificate_info.project_map[0].id this.options = data.project_map
this.value = data.project_map[0].id
this.changes() this.changes()
}) })
.finally(() => {}) .finally(() => {})
...@@ -184,9 +125,10 @@ export default { ...@@ -184,9 +125,10 @@ export default {
margin: 0 auto; margin: 0 auto;
background: #fff; background: #fff;
img { img {
position: absolute; // position: absolute;
top: 0; // top: 0;
left: 0; // left: 0;
width: 100%;
display: block; display: block;
margin-top: 20px; margin-top: 20px;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论