windons.open()实现文件预览和下载

最新推荐文章于 2024-08-11 16:52:55 发布

viceen

最新推荐文章于 2024-08-11 16:52:55 发布

阅读量8.3k

点赞数 2

分类专栏： js知识文章标签： vue.js html5 html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120524610

版权

js知识专栏收录该内容

152 篇文章 13 订阅

订阅专栏

本文介绍了如何利用JavaScript的window.open()方法在前端实现文件的预览和下载。通过本地路径配合浏览器新窗口打开PDF和图片，利用base64编码实现PDF预览，以及相对路径在Vue3中下载文件。同时，展示了不同格式文件预览和下载的差异。

摘要由CSDN通过智能技术生成

windons.open()实现文件预览和下载

1、本地路径+本地跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="openFile()">打开模板</button>
	</body>
	<script>
		function openFile(){
			window.open('C:/Users/username/Desktop/ehr/public/files/BJ.pdf');
		}
	</script>
</html>

其中，只有.pdf和图片可以实现跳转另一个新窗口进行预览，其他格式是下载

vue3实例

<button onclick="openFile()">打开模板</button>

openFile() {
	window.open('/files/BJ.pdf') ;
},

2、window.open()预览pdf文件-base64格式

另一个窗口预览pdf

var pdfResult = res.data  //base64 不带data:application/pdf;base64前缀
let pdfWindow = window.open("")
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64, " + pdfResult + "'></iframe>")

下载pdf并预览

  var pdf=res.data;       //base64 不带data:application/pdf;base64前缀
  var doc = document.createElement("a");
  doc.href ='data:application/octet-stream;base64,' + pdf;
  doc.target = "blank";
  doc.click();

3、相对路径-vue线上发版后下载文件（非后端文件）

结构

<el-button 
        v-edit-role='{parentMenu}' 
        icon='iconxiazai1 iconfont icon-size'
		@click='downloadTemplate'>下载模版
</el-button>

方法

const downloadTemplate = () => {
    window.location.href = '/files/模版.xls';
};

其中，只有.pdf和图片可以实现跳转另一个新窗口进行预览，其他格式是下载

viceen

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录