在html页面里有一个“下载”按钮，如何实现点击按钮后把页面内容下载word文档

发布网友发布时间：2022-04-07 06:59

共5个回答

懂视网时间：2022-04-07 11:20

1、使用<a>标签

<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>

这样当用户打开浏览器点击链接的时候就会直接下载文件。

但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”;

（推荐学习教程：html入门教程）

实例如下：

移到标签<a>标签上可以显示文件路径，根据路径提示进行文件路径的补全

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="UTF-8"> 
 <title></title> 
 </head> 
 <body> 
 <a href="321.png" download="test.png">点击下载</a> 
 </body> 
</html>

若需从网页上传的图片中进行下载，可能会用到以下方法：

获取主机域名：

location.hostname

获取端口号：

location.port

2、使用按钮进行监听

按钮监听又可以分为两种方法，

一是window.open()

var $eleBtn1 = $("#btn1"); 
 var $eleBtn2 = $("#btn2"); 
 //已知一个下载文件的后端接口：https://codeload.github.com/douban/douban-client/legacy.zip/master 
 //方法一：window.open() 
 $eleBtn1.click(function(){ 
  window.open("https://codeload.github.com/douban/douban-client/legacy.zip/master"); 
 });

二是表单提交

//方法二：通过form 
 $eleBtn2.click(function(){ 
  var $eleForm = $("<form method='get'></form>"); 
  $eleForm.attr("action","https://codeload.github.com/douban/douban-client/legacy.zip/master"); 
  $(document.body).append($eleForm); 
  //提交表单，实现下载 
  $eleForm.submit(); 
 });

更多编程相关内容，请关注Gxlcms编程入门栏目！

热心网友时间：2022-04-07 08:28

这段代码可以搞定，不过只能在IE浏览器下。
<!DOCTYPE html>
<html>
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<form id="form">
<table id = "PrintA" width="100%" border="1" cellspacing="0" cellpadding="0" >
<tr style="text-align : center;">
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td colSpan=4 style="text-align : center;"><font color="red" face="Verdana">单元格合并</FONT></td>
</tr>
</table>
<BR>
<table id = "Test" width="100%">
<tr>
<td><font color="red">test</FONT></td>
</tr>
</table>
</form>
<input type="button" onclick="javascript:MakeWord();" value="导出页面到Word">
<script type="text/javascript">
function MakeWord()
{
var word = new ActiveXObject("Word.Application");
// var doc = word .documents.open("c:\test.doc"); //此处为打开已有的模版
var doc = word .Documents.Add("",0,1);//不打开模版直接加入内容
var Range=doc.Range();

var sel = document.body.createTextrange();
sel.moveToElementText(form);//此处form是页面form的id
sel.select();
sel.execCommand("Copy");
Range.Paste();
word .Application.Visible = true;
doc .saveAs("c:\\ba.doc"); //存放到指定的位置注意路径一定要是“\\”不然会报错
}
</script>
</body></html>

<script type="text/javascript">
function word()
{
word=new ActiveXObject('word.application');
word.Application.Visible=trUE;
var doc=word.Documents.Add('',0,1);
range=doc.range(0,1);
var sel=Layer1.document.body.createTextrange();
Layer1.document.execCommand('Copy');
sel.moveEnd('character');
range.Paste();
location.reload();
word.ActiveWindow.ActivePane.view.Type=3; //默认为页面视图
}
</script>
<div id="Layer1"><input type="button" name="button" value="生成word" onclick="word();"></div>追问这位朋友你好，你的代码我有些看不懂，我试了下有点问题，就是我直接把代码复制，写成一个html页面，单击按钮没有反应···能帮我看下么？谢谢了···

追答这个代码我亲手测试过的，没有问题。
不过只能在IE下使用，且用到windows浏览器的activex控件，你需要允许这个控件使用（就像第一次打开淘宝登录页面时，提示的控件一样，不过这个控件不需要安装，只需要“允许使用”就可以了）。

热心网友时间：2022-04-07 09:46

热心网友时间：2022-04-07 11:21

这个恐怕不行，除非别人已经将此内容做成了word供你下载

热心网友时间：2022-04-07 13:12

这个链接的地址直接指向word文档就行了！~追问你的意思是？