首页 > 代码库 > JS实现Web中指定内容的保存与打印功能

JS实现Web中指定内容的保存与打印功能

2024-07-08 01:07:07   226人阅读


背景


首先，说说文章的背景。最近手中的一个项目，由于需求中要求提供Web界面的打印功能，当然如果没有打印机，还可以提供保存到本地。项目组长把这个“小任务”分给了我。本着努力为组长分忧解难的思想，领了任务之后，就马上开始了工作。


问题


刚开始的时候，组长给了一个工具（jatoolsprinter）让我研究，我用了一个多小时的时间，做出了一个简单的Demo，然后就是各种的测试，由于 web 打印需要浏览器安装 ActiveX 组件，在随后的测试中，我用了几款浏览器，甚至把安全级别都调到了最低的要求， ActiveX 组件的安装总是不成功，之后的几个小时也在一直调这个问题。终于，它打破了我耐心的底线，就这样被我“无情”的给抛弃了。


新大陆


吃过晚饭回来之后，我就开始走上了寻找新大陆的征途中，还好，我的运气不错，web 打印这个功能还是很常用的。很快我就有了一个新的解决方案。在简单的了解了一下官方的说明之后，找了一个文档看了看，这次我吸取了上次的教训，我先把官方提供的插件制作成了 CAB，而且马上就展开了测试，通过测试，我发现这一款工具在各版本浏览器的兼容性表现还是不错的，至于功能方面，我需要的他都提供了，而且额外的功能也是很多的，足够我们开发使用了。对了，不得不提的是，他对浏览器安装 ActiveX 组件还提供了另外一种方法，首先检测有没有安装插件，未检测到插件时，自动提示，并给出下载插件的地址，这里的插件使用的是 exe 格式的，这样就避免了浏览器安全设置的问题。


组件

  • 组件名称：Lodop（提供下载）
  • 需要引入的文件：lodop.cab（自己制作的）、LodopFuncs.js（必须的）、install_lodop32.exe（可选的，官方提供的exe格式插件）
  • 需要在页面中加入对象引用


点击安装之后，浏览器就会自动的安装，然后就可以看到下面的提示了。




实现

  • 首先是打印功能

html 代码


<span style="font-family:Microsoft YaHei;font-size:12px;"><html>
<head>
    <title>测试Web页面打印功能</title>
</head>
<style>
   .title
   {
   font-family: Arial, Vernada, Tahoma, sans-serif;
   font-size: 30px;
   color: #00008B;
   background-color: White;
   text-decoration: underline
   }
   .normal
   {
   font-family: Arial, Vernada, Tahoma, Helvetica, sans-serif;
   font-size: 14px;
   color: #444444;
   text-decoration: none;
   line-height: 180%;
   }
   #page1 div
   {
   font-size: 12px;font-family:Arial;
   }
   .tab1{border:solid 1px #bbd4e8;}
   .tab1 td,th {border:solid 1px #bbd4e8;font-size: 12px;font-family:Arial;line-height:21px;text-align:center}
   .tab1 td.tdnumber{text-align:right}
   .tab1 #lastPageFooter td,.tab1 #everyPageFooter td{text-align:left}
   .tab1 .green {color:#090}
   .tab1 .red{color:red}
   #myEveryFooter,#myLastFooter{display:none;color:#0066cc;font-weight:700;background-color:#e8f2fe}
   span.src{font-size:9pt;margin-left:100px;}
</style>
<object classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" codebase="lodop.cab#version=5,0,5,7" width=200 height=50 >
</object><br/>
<body>
    <input type="button" value=http://www.mamicode.com/"打印预览" onClick="prn1_preview();">>

js 代码


<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript" src=http://www.mamicode.com/"LodopFuncs.js"></script>>

效果图




点击，打印预览之后，就会出现下面的效果：



当然，你还可以选择打印机，在打印预览里边也可以进入这个页面，只需要点击设置即可。



  • 然后是保存功能
html 代码相同，这里就不再重复贴了

js 代码


<span style="font-family:Microsoft YaHei;font-size:12px;"><script type="text/javascript">
	// 导出为Word
	function makeWord() {
			var word = new ActiveXObject("Word.Application");
			// 打开已有模板
			// var doc = word.documents.open("");
			// 不打开模板直接加入内容
			var doc = word.Documents.Add("", 0, 1);
			var Range=doc.Range(); 
			
			var sel = document.body.createTextRange();
			sel.moveToElementText(form1);  //此处form1是页面上DIV的id
			sel.select();
			sel.execCommand("Copy");
			Range.Paste();
			word.Application.Visible = true;
			//存放到指定的位置注意路径一定要是“//”不然会报错
			doc.saveAs("D://股票投资营收明细.doc");  
		}
</script></span>


效果图




点击“导出为Word”之后，会出现一个与ActiveX控件交互的提示，点击“是”之后，就可以保存到word中了。




结束语


怎么样，很简单吧！web 页面打印指定内容其实就这么简单。只要找对好的工具，什么都不是事！


联系
我们