整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

程序员必备知识干货:Excel文件转成html页面代

程序员必备知识干货:Excel文件转成html页面代码
信我或关注微信号:狮范儿,回复:学习,获取免费学习资源包。


Excel文件转成html页面代码

main类:启动类


package com.test;
 
import trans.toHtml;
 
public class testToHtml {
 
/**
 * @param args
 */
public static void main(String[] args) {
// TODO Auto-generated method stub
 toHtml th=new toHtml();
 // System.out.println(System.getProperty("java.library.path"));
 //-Djava.library.path=D:\jar\jacob_1.9
 th.excelToHtml("d:/excel/运维门户通讯录.xlsx", "d:/test.html");
}
 
}

代码:


package trans;
 
import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileWriter;
import java.io.IOException;
import java.io.InputStreamReader;
 
import com.jacob.activeX.ActiveXComponent;
import com.jacob.com.Dispatch;
import com.jacob.com.Variant;
 
public class toHtml {
 int WORD_HTML=8;
 int WORD_TXT=7;
 int EXCEL_HTML=44;
 
 /**
 * WORD?HTML
 * @param docfile WORD ? ?· 
 * @param htmlfile ? HTML · 
 */
 public void wordToHtml(String docfile, String htmlfile)
{
 ActiveXComponent app=new ActiveXComponent("Word.Application"); // word
 try
 {
 app.setProperty("Visible", new Variant(false));
 Dispatch docs=app.getProperty("Documents").toDispatch();
 Dispatch doc=Dispatch.invoke(docs,"Open",Dispatch.Method,new Object[] { docfile, new Variant(false),new Variant(true) }, new int[1]).toDispatch();
 Dispatch.invoke(doc, "SaveAs", Dispatch.Method, new Object[] {htmlfile, new Variant(WORD_HTML) }, new int[1]);
 Variant f=new Variant(false);
 Dispatch.call(doc, "Close", f);
 }
 catch (Exception e)
 {
 e.printStackTrace();
 }
 finally
 {
 app.invoke("Quit", new Variant[] {});
 }
 }
 
 /**
 * EXCEL?HTML
 * @param xlsfile EXCEL ? ?· 
 * @param htmlfile ? HTML · 
 */
 public void excelToHtml(String xlsfile, String htmlfile)
{
 ActiveXComponent app=new ActiveXComponent("Excel.Application"); // excel
 try
 {
 app.setProperty("Visible", new Variant(false));
 Dispatch excels=app.getProperty("Workbooks").toDispatch();
 Dispatch excel=Dispatch.invoke(excels,"Open",Dispatch.Method,new Object[] { xlsfile, new Variant(false),new Variant(true) }, new int[1]).toDispatch();
 Dispatch.invoke(excel, "SaveAs", Dispatch.Method, new Object[] {htmlfile, new Variant(EXCEL_HTML) }, new int[1]);
 Variant f=new Variant(false);
 Dispatch.call(excel, "Close", f);
 }
 catch (Exception e)
 {
 e.printStackTrace();
 }
 finally
 {
 app.invoke("Quit", new Variant[] {});
 }
 }
 
 /**
 * /? ? 
 * @param folderPath ? ?· 
 * @param htmlfile ? HTML · 
 */
 public void delFolder(String folderPath)
{
 try
 {
 delAllFile(folderPath); //? 
 String filePath=folderPath;
 filePath=filePath.toString();
 java.io.File myFilePath=new java.io.File(filePath);
 myFilePath.delete(); //? ? 
 } catch (Exception e) {e.printStackTrace();}
 }
 
 /**
 * /? ? ?
 * @param path ? ?· 
 */
 public boolean delAllFile(String path)
{
 boolean flag=false;
 File file=new File(path);
 if (!file.exists())
 {
 return flag;
 }
 if (!file.isDirectory())
 {
 return flag;
 }
 String[] tempList=file.list();
 File temp=null;
 for (int i=0; i < tempList.length; i++)
 {
 if (path.endsWith(File.separator))
 {
 temp=new File(path + tempList[i]);
 }
 else
 {
 temp=new File(path + File.separator + tempList[i]);
 }
 if (temp.isFile())
 {
 temp.delete();
 }
 if (temp.isDirectory())
 {
 delAllFile(path + "/" + tempList[i]);// ? ? ?
 delFolder(path + "/" + tempList[i]);// ? ? 
 flag=true;
 }
 }
 return flag;
 }
}
需要的jar包
<<jacob.jar>>
<<toHtml.java>>
<<testToHtml.java>>

来源网络,侵权联系删除

私信我或关注微信号:狮范儿,回复:学习,获取免费学习资源包。

什么学习HTML?

理解HTML代码是制作网页的基本技能。在互联网高度发达的今天,网页制作技术开始变的和修图、处理视频一样重要。

第一,学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看,无论是文字、照片还是视频都可以通过浏览器观看,甚至是分享自己制作的小游戏。

第二,理解网页运行的基本原理后可以更好的浏览他人的网页,寻找有用信息,更合理的使用第三方工具,简单高效的制作自己的网页。

HTML学习难度与重要性

HTML代码本身非常容易理解,使用也非常简单,但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面,我们还需要CSS和JavaScript的帮助。

HTML、CSS、JavaScript这些不同的代码都有什么作用呢?简单来说,HTML代码可以为网页提供基本内容,比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局,比如标题的位置、字体、颜色、大小等,笼统的说就是为HTML代码添加的内容增加样式信息,例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互(互动)功能,例如通过按钮控制页面内容的隐藏、出现,或者为多张图片添加轮播功能等。

对比起来,HTML的学习难度最低,但作用是最重要的,因为一切页面的基础是内容,没有内容,样式与交互都不存在。

认识HTML基本结构

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

以上七行代码是一个网页文件的HTML代码的基本结构。

大家观察一下可以发现一个规律,每一行的内容都是写在“<>”里面的。原因说来话长,先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。

第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令(这句话可以暂时不必理解)。重要的是这句傲娇的代码只能存在在HTML代码的第一行!

第二行<html>标签与第七行的</html>标签是一对,“<html>”叫做开始标签,“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律,以后我将要学到的大部分标签都是这样的,可能浏览器有些强迫症吧,如果没有结束标签它会很不舒服,有可能会消极怠工而产生麻烦(不能正常显示)。不过遗憾的是<!DOCTYPE HTML>太傲娇,至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。

第三行与第四行组成一对,叫做“head”标签。顾名思义,这个“头”标签里的内容统领全局,比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入;搜索页面用的关键词信息在这里添加;页面信息的编码方式也是由此指定;浏览器窗口的标题也在这里显示。

第五行与第六行组成一对,叫做“body”标签。用来显示所有的页面内容信息。

画个图来表示一下这四个标签的层级关系(就是谁包含谁的意思,或者谁在谁的势力范围内出现):

边学边练------写一个最简单的页面

正所谓万丈高楼平地起,下面我们就动手做我们的第一个网页文件。

工具:电脑,安装一个浏览器(IE 火狐 谷歌浏览器都可以),确定“记事本”工具可用。

有了以上工具我们就可以写了。

Step1 新建一个.txt文件。

操作如下:

(1)选择合适的磁盘,比如D盘或F盘新建一个文件夹,命名为“网页”。点击进入。

(2)在空白处点击鼠标右键新建一个文本文件,命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。

如果你的电脑不显示“.txt”这样的文件后缀,可以在屏幕左上方寻找“查看”菜单,如图2

图 2

点击后,出现如下菜单如图3,点击“选项”。

图 3

点击“查看”,去掉“隐藏已知文件类型的扩展名”选项前的“对号”,如图4所示。这时就能显示或修改文件后缀了。

图 4

Step2 添加内容

(1)双击打开“第一个页面.txt”文件,把HTML基本结构共七行代码输入进去。

(2)保存,关闭文件,在“第一个页面.txt”文件上点击鼠标右键,选择“重命名”,将“.txt”修改为“.html”。这时,系统会提示,如图1,大胆点“是”。

图 1

这时我们的文件就变成了html网页文件了。

我们双击这个文件发现浏览器内一片空白,这就好比我们在桌子上摆了个碟子,里面并没有放美食。浏览器中的一片白就是空碟子的颜色,而HTML基本结构就是这个碟子。

下面我们往碟子里加点东西。

Step3 添加内容

(1)在“第一个页面.html”文件上点击鼠标右键,选择“打开方式”,选择“记事本”,如果没有“记事本”选项,请点击“选择其他应用”,点击选择最下面的“更多应用”,选择“记事本”。下一次选择“打开方式”时,“记事本”就会出现了。

(2)在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”;“<p>随着学的内容越来越多,网页就会越来越漂亮了!</p>”完成如图5

图 5

(3)保存,关闭,双击打开!效果如图6

图6

今天的边学边做就到这里,下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。

第二篇《边学边做网页篇——<head>标签里装点啥?》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479

介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排。

之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。

OK,下面进入本文正题,

contain 为何?

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page.

contain 语法

看看它的语法:

{
  /* No layout containment. */
  contain: none;
  /* Turn on containment for layout, style, paint, and size. */
  contain: strict;
  /* Turn on containment for layout, style, and paint. */
  contain: content;
  /* Turn on size containment for an element. */
  contain: size;
  /* Turn on layout containment for an element. */
  contain: layout;
  /* Turn on style containment for an element. */
  contain: style;
  /* Turn on paint containment for an element. */
  contain: paint;
}
复制代码

除去 none,取值还有 6 个,我们一个一个来看看。

contain: size

contain: size: 设定了 contain: size 的元素的渲染不会受到其子元素内容的影响。

The value turns on size containment for the element. This ensures that the containing box can be laid out without needing to examine its descendants.

我开始看到这个定义也是一头雾水,光看定义很难明白到底是什么意思。还需实践一番:

假设我们有如下简单结构:

<div class="container">
   
</div>
复制代码
.container {
    width: 300px;
    padding: 10px;
    border: 1px solid red;
}

p {
    border: 1px solid #333;
    margin: 5px;
    font-size: 14px;
}
复制代码

并且,借助 jQuery 实现每次点击容器添加一个 <p>Coco</p> 结构:

$('.container').on('click', e=> {
    $('.container').append('<p>Coco</p>')
})
复制代码

那么会得到如下结果:

可以看到,容器 .container 的高度是会随着元素的增加而增加的,这是正常的现象。

此刻,我们给容器 .container 添加一个 contain: size,也就会出现上述说的:设定了 contain: size 的元素的渲染不会受到其子元素内容的影响

.container {
    width: 300px;
    padding: 10px;
    border: 1px solid red;
+   contain: size
}
复制代码

再看看会发生什么:

正常而言,父元素的高度会因为子元素的增多而被撑高,而现在,子元素的变化不再影响父元素的样式布局,这就是 contain: size 的作用。

contain: style

接下来再说说 contain: style、contain: layout 、contain: paint。先看看 contain: style。

截止至本文书写的过程中,contain: style 暂时被移除了。

CSS Containment Module Level 1: Drop the at-risk “style containment” feature from this specification, move it Level 2。

嗯,官方说辞是因为存在某些风险,暂时被移除,可能在规范的第二版会重新定义吧,那这个属性也暂且放一放。

contain: paint

contain: paint:设定了 contain: paint 的元素即是设定了布局限制,也就是说告知 User Agent,此元素的子元素不会在此元素的边界之外被展示,因此,如果元素不在屏幕上或以其他方式设定为不可见,则还可以保证其后代不可见不被渲染。

This value turns on paint containment for the element. This ensures that the descendants of the containing box don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.

这个稍微好理解一点,先来看第一个特性:

设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示

  • 设定了 contain: paint 的元素的子元素不会在此元素的边界之外被展示

这个特点有点类似与 overflow: hidden,也就是明确告知用户代理,子元素的内容不会超出元素的边界,所以超出部分无需渲染。

简单示例,假设元素结构如下:

<div class="container">
    <p>Coco</p>
</div>
复制代码
.container {
    contain: paint;
    border: 1px solid red;
}

p{
    left: -100px;
}
复制代码

我们来看看,设定了 contain: paint 与没设定时会发生什么:

CodePen Demo -- contain: paint Demo

设定了 contain: paint 的元素在屏幕之外时不会渲染绘制

通过使用 contain: paint, 如果元素处于屏幕外,那么用户代理就会忽略渲染这些元素,从而能更快的渲染其它内容。

contain: layout

contain: layout:设定了 contain: layout 的元素即是设定了布局限制,也就是说告知 User Agent,此元素内部的样式变化不会引起元素外部的样式变化,反之亦然。

This value turns on layout containment for the element. This ensures that the containing box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.

启用 contain: layout 可以潜在地将每一帧需要渲染的元素数量减少到少数,而不是重新渲染整个文档,从而为浏览器节省了大量不必要的工作,并显着提高了性能。

使用 contain:layout,开发人员可以指定对该元素任何后代的任何更改都不会影响任何外部元素的布局,反之亦然。

因此,浏览器仅计算内部元素的位置(如果对其进行了修改),而其余DOM保持不变。因此,这意味着帧渲染管道中的布局过程将加快。

存在的问题

描述很美好,但是在实际 Demo 测试的过程中(截止至2021/04/27,Chrome 90.0.4430.85),仅仅单独使用 contain:layout 并没有验证得到上述那么美好的结果。

设定了 contain: layout 的指定元素,该元素的任何后代的任何更改还是会影响任何外部元素的布局,点击红框会增加一条 <p>Coco<p> 元素插入到 container 中:

简单的代码如下:

<div class="container">
    <p>Coco</p>
    ...
</div>
<div class="g-test"></div>
复制代码
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.container {
    width: 150px;
    padding: 10px;
    contain: layout;
    border: 1px solid red;
}

.g-test {
    width: 150px;
    height: 150px;
    border: 1px solid green;
}
复制代码

CodePen Demo -- contain: layout Demo

Can i Use -- CSS Contain

截止至 2021-04-27,Can i Use 上的 CSS Contain 兼容性,已经可以开始使用起来:

参考文献

  • CSS Containment Module Level 1
  • CSS containment
  • CSS Containment in Chrome 52


链接:https://juejin.cn/post/6958990366888607757
来源:掘金