导出pdf文件、导出excel文件和打印

最新推荐文章于 2024-12-04 17:02:52 发布

学以致用HT

最新推荐文章于 2024-12-04 17:02:52 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端 JAVAWeb 文章标签：导出pdf 导出excel 打印 jquery插件

本文链接：https://blog.youkuaiyun.com/qq_40348465/article/details/84590164

JAVAWeb 同时被 2 个专栏收录

14 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

本文介绍如何使用jQuery插件实现网页内容的导出功能，包括导出为PDF、导出为Excel以及网页打印的方法。详细展示了所需引入的文件及具体设置步骤，适用于前端开发者快速实现数据导出需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此处所介绍的是利用一些jQuery插件实现导出pdf文件、导出excel文件和打印的方法。

1.导出pdf文件

（1）需要导入两个文件：jspdf.debug.js，html2canvas.js

	    <script src="js/jspdf.debug.js"></script>
		<script src="js/html2canvas.js"></script>
		<script src="js/exportPDF.js"></script>

（2）写一个js文件，用于设置一些导出pdf的具体设置。

exportPDF.js

var downPdf = document.getElementById("btn-html2canvas");
    downPdf.onclick = function () {
        html2canvas(
        	   //打印出content所包含的元素
                document.getElementById("content"),
                {
                    dpi: 172,//导出pdf清晰度
                    onrendered: function (canvas) {
                        var contentWidth = canvas.width;
                        var contentHeight = canvas.height;

                        //一页pdf显示html页面生成的canvas高度;
                        var pageHeight = contentWidth / 592.28 * 841.89;
                        //未生成pdf的html页面高度
                        var leftHeight = contentHeight;
                        //pdf页面偏移
                        var position = 0;
                        //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
                        var imgWidth = 595.28;
                        var imgHeight = 592.28 / contentWidth * contentHeight;

                        var pageData = canvas.toDataURL('image/jpeg', 1.0);
                        var pdf = new jsPDF('', 'pt', 'a4');

                        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                        //当内容未超过pdf一页显示的范围，无需分页
                        if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                        } else {
                            while (leftHeight > 0) {
                                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                leftHeight -= pageHeight;
                                position -= 841.89;
                                //避免添加空白页
                                if (leftHeight > 0) {
                                    pdf.addPage();
                                }
                            }
                        }
                        pdf.save('动态简历.pdf');
                    },
                    //背景设为白色（默认为黑色）
                    background: "#fff"  
                })
    }

2.导出excel

此处利用query.table2excel.js来导出excel

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导出表格</title>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/jquery.table2excel.js"></script>
		<script language="JavaScript" type="text/javascript">
			$(document).ready(function() {
				$("#btnExport").click(function() {
					$("#table_excel").table2excel({
						exclude: ".noExl", //过滤位置的 css 类名，不被导出的表格行的CSS class类    
						filename: "导出excel测试" + ".xls", //导出的excel的文件名称    
						name: "Excel Document Name.xlsx", //// 导出的Excel文档的名称
						exclude_img: true, //是否导出图片。
						exclude_links: true, //是否导出超链接
						exclude_inputs: true //是否导出输入框中的内容

					});
				});
			});
		</script>
	</head>

	<body>
		<div>
			<button type="button" id="btnExport" onclick="method5('table_excel')">导出Excel</button>
		</div>
		<div id="myDiv">
			<table id="table_excel" width="100%" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td colspan="5" align="center">HTML表格导出Excel</td>
				</tr>
				<tr>
					<td>书名</td>
					<td>作者</td>
					<td>出版社</td>
					<td>价格</td>
					<td>类别</td>
				</tr>
				<tr>
					<td>JAVA编程思想</td>
					<td>Bruce Eckel</td>
					<td>机械工业出版社</td>
					<td>86.9</td>
					<td>编程</td>
				</tr>
				<tr>
					<td>JAVA核心技术 卷1</td>
					<td>凯 S.霍斯特曼</td>
					<td>机械工业出版社</td>
					<td>98</td>
					<td>编程</td>
				</tr>
			</table>
		</div>
	</body>
</html>

3.打印

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打印</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script language="javascript" src="js/jquery.jqprint-0.3.js"></script>
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js";></script>
<script language="javascript">
    function dayin() {
         $("#content").jqprint();
    }
</script>
</head>
  
<body>
    <div id="content">
         <table>
             <tr>
                 <td>test</td>
             </tr>
         </table>
    </div>
    <input type="button" onclick="dayin()" value="打印" />
</body>
</html>