如何用js实现点击按钮下载文件

如何用js实现点击按钮下载文件,第1张

在按钮上写属性 onclick="函数名()" ,作用是绑定click事件

<input type="button" onclick="Click()" value="Download" />

然后在脚本处写上对应的函数即可,在函数中跳转到相应的文件路径就行。如

function Click(){

    window.location.href="文件的url地址"

}

1、首先,在“pc6”下载站下载一个名称为“AveDesktopSites”的软件,下载成功后,如图:“单击打开软件“。

2、软件打开后找到要显示到电脑桌面html网页或htm文件,显示html网页或htm文件的存放路径。

3、设置一下电脑桌面html网页或htm文件需要显示的大小(长、宽、高、位置)。

4、此处”+、-“符号代表添加或删除路径。

5、设置好电脑桌面html网页或htm文件需要显示的大小后,在右下角有个”Apply“确认键,请点击确认,确认后便看到桌面有个”灯泡“图标软件。

6、在桌面”双击“打开”灯泡“图标软件,html网页或htm文件便可自动显示出来,软件运行时在电脑桌面右下角会看到一个”小灯泡“显示。

比如说,现在有一个外部的html文件test.html,内容是:

<input type="button" value="外部文件按钮" />

<p>外部文件p标签</p>

现在在这个网页中加载test.html中的内容,这个网页的源码为:

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

    <title></title>

    <script src="../Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        function GetHtml() {

            $.ajax({

                type: "POST",

                url: 'Handler.ashx',      //提交到一般处理程序请求数据     

                success: LoadHtml

            })

        }

        function LoadHtml(data) {

            var div = document.getElementById("out")

            div.innerHTML = data//注意这里,要是想展示test.heml中的内容就用这个,如果显示源代码则用innerText

        }

    </script>

</head>

<body>

    <input type="button" value="加载外部Html文件内容" onclick="GetHtml()" />

    <div id="out">

    </div>

</body>

</html>

上面脚本中写的Handler.ashx是一个一般处理程序,代码是这样的:

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "text/plain"

    string html = GetOutsideContent("test.html")

    context.Response.Write(html)

}

public static string GetOutsideContent(string Path)

{

    try

    {

        StreamReader sr = new StreamReader(HttpContext.Current.Server.MapPath(Path), System.Text.Encoding.GetEncoding("utf-8"))

        string content = sr.ReadToEnd().ToString()

        sr.Close()

        return content

     }

     catch

     {

         return "错误"

     }

}

public bool IsReusable

{

    get

    {

        return false

    }

}

这是asp.net下的,如果你是使用其他语言的都大同小异,从后台读取文件中的内容,使用Ajax获取后台传递的文件中的内容,思路就是这样。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6144402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存