通过点击button按钮,触发 @click="openPDF(performance_report)"方法,把对应需要展示的pdf传送到openPDF()方法内,这里的pdf文件格式必须包括id、name、url。
在这里,performance_report为预览的文件:
<div><el-button type="text" size="mini" @click="openPDF(performance_report)">测试报告</el-button></div>
<script>export default {components: {},data() {return {performance_report: [{id: null,//文件的idname: "",//文件的名称url: "",//文件的url}, ],};},created() {},mounted() {},computed: {},methods: {//打开的文件一般是在后端存储的,从后端取到文件后,把文件传输到openPDF方法,用val接收即可。openPDF(val) {axios({method: "get",url: val[0].url,params: {fileId: val[0].id,},responseType: "blob",}).then((res) => {console.log("res", res);if (res.status == "500") {this.$message({message: "下载失败!",type: "error",});return;}//文件以pdf形式进行预览let blob = new Blob([res.data], {type: "application/pdf;chartset=UTF-8",});let fileURL = URL.createObjectURL(blob);// this.fileURLOther = fileURL;window.open(fileURL);});}}}</script>