如何用JavaScript纯前端来实现下载脚本，让后端人员失业去吧

载脚本长期以来一直是互联网可用性的重要组成部分。一般都是在服务端来实现的居多，随着技术的发展，前后端分离技术的兴起，以前很多后端的事也更多让前端来实现，我开始寻找一种无需服务器就可以强制下载的方法，经过一番努力，终于我找到了它，就在Firefox Devols Debugger中，有兴趣的朋友可以自己去试一下！

后端的活我也能干了

废话不多说，直接上脚本。

1、javascript脚本

function downloadFile(data, fileName, type="text/plain") {
 // 创建不可见的元素
 const a = document.createElement("a");
 a.style.display = "none";
 document.body.appendChild(a);
 // 将href设置为要下载数据的blob表示形式
 a.href = window.URL.createObjectURL(
 new Blob([data], { type })
 );
 // 使用下载属性设置所需的文件名
 a.setAttribute("download", fileName);
 // 通过模拟点击触发下载
 a.click();
 // 清理
 window.URL.revokeObjectURL(a.href);
 document.body.removeChild(a);
}

2、html元素

<form onsubmit="onFormSubmit(); return false;">
		<p>
			<label for="demo_filename">文件名称：</label><br>
			<input type="text" id="demo_filename">
		</p>
		<p>
			<label for="demo_content">内容：</label><br>
			<textarea id="demo_content"></textarea>
		</p>
		<button type="submit">下载</button>
	</form>

3、运行效果

是不是很简单，这样做的函数非常小，并且依赖于URL.createObjectUrl，函数注入<a>元素，将其设置为Blob值设置为目标文件的文本内容，并单击下载按钮以触发下载。元素在过程中保持隐藏状态，并在click()调用，一旦函数被调用，浏览器的下载提示就会显示出来，createObjectURL和Blob这两种技术才是真正的魔力！

后端工程师表示可以早点下班了

面制作技术详解

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style="width:50%;margin:auto;">放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中，就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style="position:fixed; top:0px;">添加到<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>之上。

将</div>添加到<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>之下。

position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说，就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过HTML页面中head标签有啥用？——零基础自学网页制作的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>标签。

hover指的是：当鼠标悬停在a上面时的状态。

使用：连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条，就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面，为div规定尺寸，添加style="width:610px; height:530px;"。

这样，就不会超出视窗。但是代码写完后发现并不是，如图：

多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增加一条语句"overflow-y:scroll;"

这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。

如图：

因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。

添加“overflow-x：hidden”即可，hidden（隐藏）。

如图：hidden之后，将无法滚动或拖动画面。

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

</div>

同时还要给里面的div添加margin来让它们对齐

</div>

完整代码：用HTML制作一个简单页面（代码阅读练习）——零基础自学网页制作

作流设计器javascript 源码，就问你香不香，拿走不谢～，先看看demo效果，pc端浏览器版http://kgo-js.com/htmls/xbpmdesignsample.html

在线咨询

上一篇：肖sir_html之基本使用（1）
下一篇：js入门三部曲「第二部」ep10 让坤坤变大 #css

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何用JavaScript纯前端来实现下载脚本，让后端人员失业去吧

面制作技术详解

您的项目需求