138 lines
3.9 KiB
Vue
138 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<div ref="content" class="content">
|
||
<!-- <pdf :src="url" class="PDF"></pdf> -->
|
||
</div>
|
||
<div class="bottom">
|
||
<a href="" download="">
|
||
<el-button type="primary">保存到相册</el-button>
|
||
</a>
|
||
</div>
|
||
<iframe
|
||
src="https://zsxt.nbzs.org.cn/Files/UploadFiles/e85a13ef-431c-46a5-85cd-9dd1b4f50fc6/80616f98-da17-49bc-92d0-b87199963787.pdf"
|
||
frameborder="0"
|
||
></iframe>
|
||
<!-- <el-button type="primary" @click="this.savePdf()">测试2</el-button>
|
||
<el-button type="primary" @click="this.handlePrint()">测试3</el-button>
|
||
<el-button type="primary" @click="testdownload4()">测试4</el-button>
|
||
<div id="nav">222</div> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
|
||
<script>
|
||
import pdf from "vue-pdf";
|
||
import $ from "jquery";
|
||
import html2canvas from "html2canvas";
|
||
// import axios from "axios";
|
||
import request from "@/common/util";
|
||
import { mgop } from "@aligov/jssdk-mgop";
|
||
export default {
|
||
components: {
|
||
pdf
|
||
},
|
||
data() {
|
||
return {
|
||
url: ""
|
||
};
|
||
},
|
||
created() {
|
||
this.onInit();
|
||
},
|
||
mounted() {
|
||
// 截图
|
||
// html2canvas(this.$refs.PDF).then(canvas => {
|
||
// canvas.id = "mycanvas";
|
||
// const base64 = canvas.toDataURL("image/png");
|
||
// jquery("a").prop("href", base64);
|
||
// });
|
||
},
|
||
methods: {
|
||
onInit() {
|
||
this.onLoadData();
|
||
request({
|
||
url: "http://10.19.94.9:7099/api/agreement/info",
|
||
method: "post",
|
||
data: {
|
||
ticket: window.sessionStorage.getItem("ticket"),
|
||
id: "C655515B-FD91-48F2-BD79-EAABAFB7077C"
|
||
},
|
||
headers: { "Content-Type": "application/json; charset=UTF-8" },
|
||
responseType: "arraybuffer" //一定要设置响应类型，否则页面会是空白pdf
|
||
}).then(result => {
|
||
console.log("请求成功了", result);
|
||
const binaryData = [];
|
||
binaryData.push(result.data);
|
||
//获取blob链接
|
||
this.url = window.URL.createObjectURL(
|
||
new Blob(binaryData, { type: "application/pdf" })
|
||
);
|
||
$("a").prop("href", this.url);
|
||
// if (pdfUrl) {
|
||
// this.handlePrint(pdfUrl);
|
||
// }
|
||
});
|
||
},
|
||
handlePrint() {
|
||
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", this.url);
|
||
iframe.setAttribute("id", "print-iframe");
|
||
document.body.appendChild(iframe);
|
||
doc = iframe.contentWindow.document;
|
||
doc.close();
|
||
iframe.contentWindow.focus();
|
||
}
|
||
iframe.contentWindow.print();
|
||
},
|
||
savePdf() {
|
||
ZWJSBridge.onReady(() => {
|
||
console.log("初始化完成后，执行bridge方法-savePdf");
|
||
ZWJSBridge.saveImage({
|
||
url: this.url
|
||
})
|
||
.then(result => {
|
||
console.log("saveImage()成功:" + JSON.stringify(result));
|
||
})
|
||
.catch(error => {
|
||
console.log("saveImage()失败:" + JSON.stringify(result));
|
||
console.log(error);
|
||
});
|
||
});
|
||
},
|
||
testdownload4() {
|
||
ZWJSBridge.onReady(() => {
|
||
console.log("初始化完成后，执行bridge方法-testdownload4");
|
||
ZWJSBridge.openLink({
|
||
url: this.url
|
||
})
|
||
.then(result => {
|
||
console.log("testdownload4():" + result);
|
||
})
|
||
.catch(error => {
|
||
console.log(error);
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.content {
|
||
text-align: center;
|
||
line-height: 200px;
|
||
font-size: 30px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.bottom {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|