126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<template>
|
||
<div>
|
||
<pdf :src="url"></pdf>
|
||
<div ref="content" class="content">被保存的内容</div>
|
||
<div class="bottom">
|
||
<a href="" download="">
|
||
<el-button type="primary">保存到相册</el-button>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
|
||
<script>
|
||
import pdf from "vue-pdf";
|
||
import jquery from "jquery";
|
||
import html2canvas from "html2canvas";
|
||
import axios from "axios";
|
||
import request from "@/common/util";
|
||
export default {
|
||
components: {
|
||
pdf,
|
||
},
|
||
data() {
|
||
return {
|
||
url: "",
|
||
};
|
||
},
|
||
created() {
|
||
this.onInit();
|
||
console.log("pdf");
|
||
},
|
||
mounted() {
|
||
// 截图
|
||
html2canvas(this.$refs.content).then((canvas) => {
|
||
canvas.id = "mycanvas";
|
||
const base64 = canvas.toDataURL("image/png");
|
||
jquery("a").prop("href", base64);
|
||
});
|
||
},
|
||
methods: {
|
||
onInit() {
|
||
this.onLoadData();
|
||
request({
|
||
url: "http://localhost:5566/agreement/info",
|
||
method: "post",
|
||
data: {
|
||
ticket: "8a1188557bda7894017bed584f803119-ticket",
|
||
id: "C655515B-FD91-48F2-BD79-EAABAFB7077C",
|
||
},
|
||
headers: { "Content-Type": "application/json; charset=UTF-8" },
|
||
responseType: "arraybuffer", //一定要设置响应类型，否则页面会是空白pdf
|
||
}).then((result) => {
|
||
const binaryData = [];
|
||
binaryData.push(result.data);
|
||
//获取blob链接
|
||
this.url = window.URL.createObjectURL(
|
||
new Blob(binaryData, { type: "application/pdf" })
|
||
);
|
||
// if (pdfUrl) {
|
||
// this.handlePrint(pdfUrl);
|
||
// }
|
||
});
|
||
// axios({
|
||
// method: "post",
|
||
// url: "http://10.19.94.9:7099/api/agreement/info",
|
||
// responseType: "blob",
|
||
// data: {
|
||
// ticket: "8a1188557bda7894017bed584f803119-ticket",
|
||
// id: "C655515B-FD91-48F2-BD79-EAABAFB7077C",
|
||
// },
|
||
// }).then((res) => {
|
||
// debugger;
|
||
// console.log(res);
|
||
// if (!res) {
|
||
// return;
|
||
// }
|
||
// let blob = new Blob([res.data], {
|
||
// type: "application/octet-stream",
|
||
// });
|
||
// let url = window.URL.createObjectURL(blob);
|
||
// let link = document.createElement("a");
|
||
// link.style.display = "none";
|
||
// link.href = url;
|
||
// document.body.appendChild(link);
|
||
// link.click();
|
||
// });
|
||
},
|
||
handlePrint(pdf) {
|
||
if (document.getElementById("print-iframe")) {
|
||
document.body.removeChild(document.getElementById("print-iframe"));
|
||
}
|
||
//判断iframe是否存在，不存在则创建iframe
|
||
let iframe = document.getElementById("print-iframe");
|
||
if (!iframe) {
|
||
iframe = document.createElement("IFRAME");
|
||
let doc = null;
|
||
iframe.setAttribute("src", pdf);
|
||
iframe.setAttribute("id", "print-iframe");
|
||
document.body.appendChild(iframe);
|
||
doc = iframe.contentWindow.document;
|
||
doc.close();
|
||
iframe.contentWindow.focus();
|
||
}
|
||
iframe.contentWindow.print();
|
||
},
|
||
onLoadData() {
|
||
// console.log(this.$route.params);
|
||
// this.url = this.$route.params.url;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.content {
|
||
text-align: center;
|
||
height: 200px;
|
||
line-height: 200px;
|
||
font-size: 30px;
|
||
}
|
||
.bottom {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|