弹窗预览pdf，下载文档

EstherNi

已于 2023-05-16 14:43:49 修改

阅读量661

点赞数

分类专栏： VUE 文章标签： javascript 前端开发语言

于 2022-06-21 16:55:15 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/125394236

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<el-table-column label="操作">
	<template slot-scope="scope">
		<el-button type="text" size="mini" @click="handleSee(scope.$index, scope.row)">预览</el-button>
		<el-button size="mini" type="text" @click="downLoad(scope.$index, scope.row)">下载</el-button>
	</template>
</el-table-column>

 <el-dialog title="预览" :visible.sync="dialogVisible" width="90%" class="dialog">
      <iframe :src="iframeUrl" style="width: 100%; height: 83vh; overflow-y: auto; overflow-x: auto"></iframe>
 </el-dialog>
 
 data:{
    iframeUrl: "", //iframe预览显示
    dialogVisible: false, //弹出层是否显示
}

 // 预览
handleSee(index, row) {
	this.dialogVisible = true;
	yulan(row.id).then((res) => {
		if (this.dialogVisible == true) {
			var binaryData = [];
			binaryData.push(res);
			this.iframeUrl = window.URL.createObjectURL(
				new Blob(binaryData, { type: "application/pdf" })
			 );
		}
	});
},
// 下载
downLoad(index, row) {
	console.log(row);
	dodnLoadDoc(row.id).then((res) => {
          const url = URL.createObjectURL(res);
          const link = document.createElement("a");
          document.body.appendChild(link);
          link.download = row.reportName;
          link.href = url;
          link.click();
          document.body.removeChild(link);
          URL.revokeObjectURL(url);
        })
        .catch((error) => {
          this.$message({ message: error.message, type: "error" });
        });
    },

// 预览接口：
export function yulan(query) {
  return request({
    url: `XXX/${query}`,
    method: 'get',
    // params: query
    responseType: "blob",
  })
}
// 下载接口
export function dodnLoadDoc(query) {
  return request({
    url: `XXX/${query}`,
    method: 'get',
    // params: query
    responseType: "blob",
  })
}