HTML on Coinidea的博客

[Javascript]网页调用打印机

Tue, 01 Mar 2016 09:17:03 +0000

有人反应点击没反应，目前我在Chrome和IE都测试过是可以的：

我想了一下可能的原因应该是没有引入jQuery导致的，目前加入CDN上的jQuery，我把代码更新为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<html>
<head>
 <meta charset="utf-8">
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
 <title></title>
</head>
<body>
 <div id='div1'>把要打印的内容放这里</div>
 <div id="div2">div2的内容</div>
 <a href="javascript:printHTML('#div1')" target="_self">打印</a>
 <script language="javascript">
 function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
 }
 </script>
</body>
</html>

原文 Javascript代码，依赖jQuery：

1
2
3
4
5
6


function printHTML(page) {
 var bodyHTML = window.document.body.innerHTML;
 window.document.body.innerHTML = $(page).html();
 window.print();
 window.document.body.innerHTML = bodyHTML;
}

[HTML]DIV和table页面布局的区别和联系

Sat, 23 May 2015 05:38:17 +0000

DIV和Table页面布局的区别和联系

现在对于网页制作是选择传统的Table还是用新型的DIV，有分歧。一部分说还是用Table好，开发快，容易控制，浏览器兼容也好些；另一部分认为DIV好，以后的发展趋势,主要是如下原因：

DIV+CSS布局比Table布局节省页面代码，代码结构也更清晰明了。
DIV+CSS开发速度要比Table快，而且布局更精确，不过手写代码明显增加DIV+CSS布局，使网站版面布局修改变得更简单。
DIV+CSS布局能够适应未来多种客户端需求。
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。

DIV有这么多好处是不是有些心动，决定学它。DIV和Table各有长处，通常情况下它们可以互换使用。我感觉正确的符合标准的设计思路是：使用DIV等布局元素来制作页面的设计布局，定位，色块，图片等。使用Table，UL等这样的元素来显示页面中需要展示的数据。因为DIV不会像Table一样，在IE下要将整个Table下载完后才全部显示内容 (firefox不会)，所以用Table来布局显然是不合适的，尤其是数据量大时，在IE下用Table会发现慢得多。而DIV就好多了。当然，DIV也起整理数据的作用。

DIV用于布局，Table用于显示数据，这是现在最基本的设计原则。

Table里可以内嵌DIV。反之DIV可以内嵌Table吗?
当然可以了。
DIV是不是跟Table一样的作用?
DIV的作用跟Table是差不多的，但是DIV对XML的支持更好而且使用起来比较灵活，因此被推荐为新的网页布局方式。
DIV和Table哪个速度快?
DIV相对比较快，网页内容的显示需要将相对一整块的内容下载完成后再显示。使用DIV布局是许多的独立的相对较小的范围，而使用Table布局一般都会表格嵌套多层形成较大的下载范围。

另外CSS中的.与#的区别在于：

. 用class调用
# 使用id调用。

[HTML]HTML传值

Sat, 23 May 2015 05:35:22 +0000

JS中可以用window.location.href属性获取完整地址,那么我们的参数完全可以使用GET模式来传递即表单的method="GET"

下边是用JS构造的获取get模式提交值的一个函数.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Request(strName) {
 var strHref = window.document.location.href;
 var intPos = strHref.indexOf("?");
 var strRight = strHref.substr(intPos + 1);

 var arrTmp = strRight.split("&");
 for (var i = 0; i < arrTmp.length; i++) {
 var arrTemp = arrTmp[i].split("=");
 if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
 }
 return "";
}

使用方法:
var id=Request("id");
document.write(id);

[HTML]防止F5重复刷新页面

Sat, 23 May 2015 05:30:50 +0000

a页面上有个form
你提交这个页面，转到b页面
在b页面上按刷新键，会弹出那个重新发送信息的对话框

这个问题我可以从编网页的角度解决
a页面提交到你的server page 上(asp,jsp)
server page处理后，不返给用户b页面
而是一个简单的c页面，如

然后就会马上转到b页面，这里是main.jsp

如果在b页面上刷新，不会弹出那个对话框
如果在b页面上按“后退”，是到a页面
用户觉察不到中间c页面的存在

更深入的，可以设计弹出一个javascript的对话框，确定以后，不管是刷新，还是后退，这个对话框都不会再次弹出
redirect.jsp

批量Word转HTML – ConvertWordToHTML[Update: Word转换工具]

Sun, 11 Jan 2015 10:34:33 +0000

最近遇到一个需求是需要将Word批量的转换为HTML。

如果是比较少量的Word文件，可以用Word自带的“另存为”即可。但是如果Word文件的量比较大的话，这是一件比较复杂的事。

上网查了很多资料，有PHP，Python，Ruby和C#等解决方法。其中找到一个“迅捷转换器”，不过和我的需求不是很符合，所以决定自己写一个。因为Word来自Microsoft，所以我觉得C#来解决这个问题或许会好一些。

我在GitHub上开源了一份自己写的带GUI的代码：https://github.com/hujiulin/ConvertWordToHTML [目前是单线程的，之后会改成多线程的]。

运行界面如下：

程序初始界面：
“Open”选择一个含有Word文档的输入文件：
“SaveAs”选择一个输出文件夹：
程序运行结束：
输入及输出结果：

程序说明：

依赖：Windows操作系统，.Net FrameWork 3.5，Office Word
Word另存为HTML有几种格式可以选：单个网页mht，网页htm以及筛选过的网页htm。我选择的是筛选过的html，所有公式全部转成gif或者jpg图片，稍微规范一点的htm不会含有微软中的一些恶心的格式信息。

GitHub地址：https://github.com/hujiulin/ConvertWordToHTML

程序下载：http://devhu-github.stor.sinaapp.com/ConvertWordToHTML.rar

2015-1-24 Update:

Rename solution and project to WordConverter; Add feature: convert word to PDF; ADD feature switch specified ext;

Word转换工具现在已经支持HTML和PDF格式。

GitHub地址更新为：https://github.com/hujiulin/WordConverter

程序下载地址：http://devhu-github.stor.sinaapp.com/WordConverter.rar