IE下用JavaScript将HTML导出为Word、Pdf

       最近升级公司内部系统发文章的功能,涉及到将文章内容导出为html、word、pdf,系统多用于IE环境下,并且公司电脑都预装了office,所以导出暂时采用客户端的方式。

       页面基本结构:       

<html>
	<head>
		<title>客户端导出测试</title>
		<script type="text/javascript">
			function exportHtml {
			
			}
			
			function exportWord() {
			
			}
			
			function exportPdf() {
			
			}
		</script>
	</head>
	<body>
		<!-- toolbar -->
		<div>
			<button>导出HTML</button>
			<button>导出WORD</button>
			<button>导出PDF</button>
		</div>
		<!-- content -->
		<div id="content" style="border: 1px #000 solid">
			<h1>标题</h1>
			<font color="gray">正文内容</font>
		</div>
	</body>
</html>

       可以复制下来在浏览器内看下效果,我们的目标是将content内的内容分别导出到html、word、pdf文件中,content内的内容可能非常复杂,样式非常多,还有可能标签不标准,不对称,并且有中文,如果拿到服务端去处理,比较复杂,下面分别完善三个导出方法。

       导出文件时需要选择导出目录,那么如何弹出窗口选择目录呢?

function getExportPath() {
	var shell = new ActiveXObject("Shell.Application");
	var folder = shell.BrowseForFolder(0, '请选择存储目录', 0x0040, 0x11); 
	var filePath;
	if(folder != null) {
		 filePath = folder.Items().Item().Path;
	}
	return filePath;
}

       要使上段代码生效,需要对IE浏览器设置一下,如下图:

       设置完之后,直接在浏览器运行还可能出现没有权限的问题,那就需要将html部署在服务器上,让后将当前服务器的访问地址设置为可信站点。

       导出HTML:

function exportHtml {
	var filePath = getExportPath();
	if(filePath != null) {
		var file;
		try {
			var fso = new ActiveXObject("Scripting.FileSystemObject");  
			file = fso.createtextfile(filePath + "/测试导出.html",true);// 创建文件
			file.WriteLine(content.innerHTML);// 写入数据
			alert("导出成功");
		} catch (e) {
			alert("导出失败");
		} finally {
			if(file != null) 
				file.close();// 关闭连接
		}
	}
}

       导出WORD:

function exportWord() {
	var filePath = getExportPath();
	if(filePath != null) {
		try {
			var word = new ActiveXObject("Word.Application");
			var doc = word.Documents.Add("", 0, 1);
			var range = doc.Range(0, 1);
			var sel = document.body.createTextRange();
			try {
				sel.moveToElementText(content);
			} catch (notE) {
				alert("导出数据失败,没有数据可以导出。");
				window.close();
				return;
			}
			sel.select();
			sel.execCommand("Copy");
			range.Paste();
			//word.Application.Visible = true;// 控制word窗口是否显示
			doc.saveAs(filePath + "/导出测试.doc");// 保存
			alert("导出成功");
		} catch (e) {
			alert("导出数据失败,需要在客户机器安装Microsoft Office Word(不限版本),将当前站点加入信任站点,允许在IE中运行ActiveX控件。");
		} finally {
			try {word.quit();// 关闭word窗口} catch (ex) {}
		}
	}
}

       导出PDF:

var filePath = getExportPath();
	if(filePath != null) {
		try {
			var word = new ActiveXObject("Word.Application");
			var doc = word.Documents.Add("", 0, 1);
			var range = doc.Range(0, 1);
			var sel = document.body.createTextRange();
			try {
				sel.moveToElementText(content);
			} catch (notE) {
				alert("导出数据失败,没有数据可以导出。");
				window.close();
				return;
			}
			sel.select();
			sel.execCommand("Copy");
			range.Paste();
			//word.Application.Visible = true;// 控制word窗口是否显示
			doc.saveAs(filePath + "/导出测试.pdf", 17);// 保存为pdf格式
			alert("导出成功");
		} catch (e) {
			alert("导出数据失败,需要在客户机器安装Microsoft Office Word 2007以上版本,将当前站点加入信任站点,允许在IE中运行ActiveX控件。");
		} finally {
			try {word.quit();// 关闭word窗口} catch (ex) {}
		}
	}

       导出PDF废了一番周折,saveAs方法有一串参数,这里我只用到了前两个,第一个参数是保存文件名称,第二个参数是保存文件格式,office 2007或2010支持将当前word另存为PDF格式,第二个参数是VB或C#环境下枚举类WdSaveFormat的一个值,经过多次弯曲的查询,终于查到其各个变量对应值。

Name

Value

Description

wdFormatDocument

0

Microsoft Office Word 97 - 2003 binary file format.

wdFormatDOSText

4

Microsoft DOS text format.

wdFormatDOSTextLineBreaks

5

Microsoft DOS text with line breaks preserved.

wdFormatEncodedText

7

Encoded text format.

wdFormatFilteredHTML

10

Filtered HTML format.

wdFormatFlatXML

19

Open XML file format saved as a single XML file.

wdFormatFlatXML

20

Open XML file format with macros enabled saved as a single XML file.

wdFormatFlatXMLTemplate

21

Open XML template format saved as a XML single file.

wdFormatFlatXMLTemplateMacroEnabled

22

Open XML template format with macros enabled saved as a single XML file.

wdFormatOpenDocumentText

23

OpenDocument Text format.

wdFormatHTML

8

Standard HTML format.

wdFormatRTF

6

Rich text format (RTF).

wdFormatStrictOpenXMLDocument

24

Strict Open XML document format.

wdFormatTemplate

1

Word template format.

wdFormatText

2

Microsoft Windows text format.

wdFormatTextLineBreaks

3

Windows text format with line breaks preserved.

wdFormatUnicodeText

7

Unicode text format.

wdFormatWebArchive

9

Web archive format.

wdFormatXML

11

Extensible Markup Language (XML) format.

wdFormatDocument97

0

Microsoft Word 97 document format.

wdFormatDocumentDefault

16

Word default document file format. For Word 2010, this is the DOCX format.

wdFormatPDF

17

PDF format.

wdFormatTemplate97

1

Word 97 template format.

wdFormatXMLDocument

12

XML document format.

wdFormatXMLDocumentMacroEnabled

13

XML document format with macros enabled.

wdFormatXMLTemplate

14

XML template format.

wdFormatXMLTemplateMacroEnabled

15

XML template format with macros enabled.

wdFormatXPS

18

XPS format.

       使用客户端的导出方式优缺点都是显而易见的。

       优点:原样导出,代码简单,不用为样式复杂的HTML导出发愁;

       缺点:依赖客户端,只能在IE下使用,浏览器安全降低。

       好了,先写这么多,大家晚安。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨建荣的学习笔记

深入理解Oracle中的DBCA

但凡是学习 过Oracle的同学,DBCA都是一个必备工具,有了这个工具,创建数据库成为可能。而DBCA本身有图形和静默两种方式。静默方式看起来高大上,可以轻松...

3599
来自专栏QQ音乐技术团队的专栏

electron 构建跨平台桌面应用

昨日(2016.09.13)本文发表后,获得了一定的阅读和转发量,但经部分网友反馈和仔细审核后发现,在与 NW.js 对比的环节,言辞欠妥,且数据的真实性有待考...

86110
来自专栏企鹅号快讯

开源组件NanUI一周年-使用HTML/CSS/JS来构建.Net Winform应用程序界面

NanUI是什么 NanUI基于ChromiumFX项目进行开发,它能让你在你的Winform应用程序中使用HTML5/CSS3/Javascript等网页技术...

2166
来自专栏极客猴

Django 实战1:搭建属于自己社工查询系统(上)

前面的文章已经把模板、模型、视图、表单等知识点逐一讲解,大家已经熟悉它们具体用法。但如何将其串联起来还一筹莫展。本篇文章分享我之前做过的一个小项目,帮助大家抹开...

1762
来自专栏云计算教程系列

如何在Centos系统上安装Wordpress

WordPress是一个以PHP和MySQL为平台的自由开源的博客软件和内容管理系统。WordPress具有插件架构和模板系统。Alexa排行前100万的网站中...

1473
来自专栏GopherCoder

Python 强化训练:第十篇

1543
来自专栏张戈的专栏

桌面白屏(Active故障)修复批处理

一年前我在做用户系统维护服务工作时发现 AD 域环境下,AD 用户桌面经常会出现壁纸无法显示,ActiveDesktop 桌面损坏之类的故障,当时从前人心得里学...

3256
来自专栏日常学python

Ajax网页爬取案例详解

首先列举出一些python中爬虫常用的库,用之前需要先下载好,本文假设你已经安装好相应的库。

1401
来自专栏哈雷彗星撞地球

Mac 下安装运行Rocket.chat

最近花了一周的时间,复习了HTML、CSS、原生JS,并学习了Node.js、CoffeeScript.js、MongoDB,入了下门。 因为准备在Rocke...

1292
来自专栏技术小讲堂

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

多个月以来,我和多个Github上的社区贡献者一起建立支持库、包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angu...

4156

扫码关注云+社区