<template>
|
<div>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-document"
|
class="btn"
|
@click="dialogVisible = true"
|
>{{ btnText }}</el-button
|
>
|
|
<el-dialog
|
title="PDF 预览"
|
:visible.sync="dialogVisible"
|
:close-on-click-modal="false"
|
>
|
<div class="main">
|
<iframe
|
id="printIframe"
|
:src=" src"
|
frameborder="0"
|
style="width: 100%; height: 100%"
|
></iframe>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "home",
|
data() {
|
return {
|
dialogVisible: false,
|
btnText: "查看报告",
|
src: "/test.pdf",
|
url: "",
|
};
|
},
|
methods: {
|
downLoadFileImg(fileUrl, fileName) {
|
// 后端文件地址和名称
|
|
// 可下载，名称也有效 -- 推荐
|
// const x = new window.XMLHttpRequest()
|
// x.open('GET', fileUrl, true)
|
// x.responseType = 'blob' // 选择返回格式为blob --- 一般后端返回的是看不懂的文件流 故需要转成blob
|
// x.onload = () => {
|
// this.url = window.URL.createObjectURL(x.response) //将后端返回的blob文件读取出url
|
|
// console.log('blob====',x.response) //Blob {size: 38617, type: 'application/pdf'}
|
// console.log('url====',this.url) //blob:http://localhost:7197/cb047277-e5e6-4905-bf8c-dbecd86a0105
|
|
// url可以预览和下载------如果想要下载就把下方注释打开即可
|
// const a = document.createElement('a')
|
// a.href = this.url
|
// a.download = fileName
|
// a.click()
|
// }
|
// x.send()
|
|
// // 或者下方的方式
|
axios({
|
url: `http://localhost:81/dev-api/system/report/toPdf + "?tjNumber=" + this.row.tjNumber`,
|
method: "get",
|
timeout: 100000,
|
responseType: "blob",
|
headers: {
|
type: "application/pdf",
|
},
|
})
|
.then((res) => {
|
// console.log("res.data", res.data);
|
this.url = window.URL.createObjectURL(res.data); //将后端返回的blob文件读取出url
|
// console.log("通过读取blob文件得到url地址===", this.url);
|
})
|
.catch((error) => {
|
console.log(error);
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.btn {
|
margin: 20px 0px;
|
}
|
.main {
|
height: 700px;
|
overflow: hidden;
|
}
|
#printIframe::-webkit-scrollbar {
|
width: 6px;
|
}
|
/* 修改 滚动条的 下面 的 样式 */
|
#printIframe::-webkit-scrollbar-track {
|
background-color: white;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius: 2em;
|
}
|
/* 修改 滑块 */
|
#printIframe::-webkit-scrollbar-thumb {
|
background-color: #dcdfe6;
|
-webkit-border-radius: 2em;
|
-moz-border-radius: 2em;
|
border-radius: 2em;
|
}
|
.el-dialog {
|
width: 1000px;
|
height: 700px;
|
}
|
.el-dialog__header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.el-dialog__body {
|
padding: 0;
|
}
|
</style>
|
