得以前刚开始接触网页制作时都是使用Microsoft FrontPage编辑器,也正因为有所见即得编辑器,才能让原本复杂难懂的HTML原始码变得更简单易懂,它将原始码转换成可视化内容,只要直接输入文字、图片、超连接后修改样式即可将网页制作出来,当然这些页面背后仍是有所谓的HTML代码存在,只在需要时才会切换原始码模式。
我后来还是很习惯通过所见即所得(What You See Is What You Get,缩写WYSIWYG)编辑器写文章,WordPress内置文章编辑功能就是此形式,有时候遇到要编辑网页也会使用这个工具来产生HTML代码,毕竟以看得到的方式编辑比较容易得到自己需要的东西,大概就是这么一回事。
现在网页编辑器已没有像十几年前那么盛行了,可能很多人的电脑里早已没有类似的应用程序,如果你还是需要这功能,HTML Editor或许可以应急,这是一款在线免费HTML可视化编辑器,直接打开浏览器就能使用,它就像一般的网页编辑器,使用者可以直接在编辑器里建立图文内容,HTML Editor会在另一画面显示HTML原始码,编辑时就能直接取得对应的原始码以便使用于博客文章或网页制作。
这功能看起来虽然好像微不足道,事实上当你需要时就会非常方便,HTML Editor不限于Windows或Mac使用,而且更重要的是不用额外下载安装软件;对于不熟悉HTML编写的使用者来说,它也能快速制作出带有样式的原始码,尤其是拿来撰写网页表格,直接使用可视化编辑器会更简单。
印象中旧版Microsoft Office也有类似功能,不过很可惜现在新版好像已经没有了。
站点名称:HTML Editor
网站连接:https://htmleditor.io/
使用教学
STEP 1
开启HTML Editor网站后,画面被切割成左右两个部分,左边为所见即所得编辑器,右边是显示原始码的字段,一开始已经有示例内容,可以看到编辑器里样式文字已经被转为我们熟悉的HTML程序码并显示于网站右侧。
STEP 2
使用方法很简单,我就不通盘介绍所有编辑器的功能,大致上比较会用到的例如格式,可以调整H1、H2、H3等不同层级的标题,亦能加入粗体、斜体、项目符号、缩排或设定对齐方向等等,其它例如插入超连接、图片或视频也都能从编辑器上方的功能按钮来做到。
我认为HTML Editor最方便的是可以拿来做网页表格,从「Table」以鼠标光标快速设定要多少字段,即可在编辑器里插入表格,同时设定每个字段要显示那些内容。如果要直接以代码来撰写表格可能稍嫌复杂,以所见即所得编辑器会简单许多。
STEP 3
当你一边在使用编辑器时,右侧就会同步显示对应的HTML代码,跟早期网页编辑器功能差不多,最后直接复制代码,就能将它复制、使用到其它地方,可以说非常好用!也不用再因为需要产生原始码而去找网页编辑器,从浏览器开启HTML Editor即可。
两天有个客户需要把网页转为pdf,之前也没开发过类似的工具,就在百度搜索了一波,主要有下面三种
在百度(我一般用必应)搜索“在线网页转pdf”就有很多可以做这个事的网站,免费的如
各种pdf的操作都有,免费使用,速度一般。
官网地址https://tools.pdf24.org/zh
PDF24 Tools
开源免费项目,使用golang写的,提供在线转
官网地址http://doctron.lampnick.com/
doctron在线体验demo
还有挺多其他的,可以自己搜索,但是都不符合我的预期。
Doctron,这是我今天要介绍的重头戏。
Doctron是基于Docker、无状态、简单、快速、高质量的文档转换服务。目前支持将html转为pdf、图片(使用chrome(Chromium)浏览器内核,保证转换质量)。支持PDF添加水印。
管他的,先把代码下载下来再说
git clone https://gitcode.net/mirrors/lampnick/doctron.git
仓库
运行
go build
./doctron --config conf/default.yaml
运行截图
转pdf,访问http://127.0.0.1:8080/convert/html2pdf?u=doctron&p=lampnick&url=<url>,更换链接中的url为你需要转换的url即可。
转换效果
然后就可以写程序去批量转换需要的网页了,但是我需要转换的网页有两个需求
1、网站需要会员登录,不然只能看得到一部分
2、需要把网站的头和尾去掉的
这就为难我了,不会go语言啊,硬着头皮搞了,肯定有个地方打开这个url的,就去代码慢慢找,慢慢调试,功夫不负有心人,终于找到调用的地方了。
第一步:添加网站用户登录cookie
添加cookie之前
添加cookie之后
第二步:去掉网站头尾
chromedp.Evaluate(`$('.header').css("display" , "none");
$('.btn-group').css("display" , "none");
$('.container .container:first').css("display" , "none");
$('.breadcrumb').css("display" , "none");
$('.footer').css("display" , "none")`, &ins.buf),
打开网页后执行js代码把头尾隐藏掉
第三步:程序化,批量自动生成pdf
public static void createPDF(String folder , String cl , String pdfFile, String urlhref) {
try {
String fileName = pdfFile.replace("/", ":");
String filePath = folder + fileName;
File srcFile = new File(filePath);
File newFolder = new File("/Volumes/disk2/myproject" + File.separator + cl);
File destFile = new File(newFolder, fileName);
if(destFile.exists()){
return;
}
if(srcFile.exists()){
//移动到对应目录
if(!newFolder.exists()){
newFolder.mkdirs();
}
FileUtils.moveFile(srcFile , destFile);
return;
}
if(!newFolder.exists()){
newFolder.mkdirs();
}
String url = "http://127.0.0.1:8888/convert/html2pdf?u=doctron&p=lampnick&url="+urlhref;
HttpEntity<String> entity = new HttpEntity<String>(null, null);
RestTemplate restTemplate = new RestTemplate();
ResponseEntity<byte[]> bytes = restTemplate.exchange(url, HttpMethod.GET, entity, byte[].class);
if (bytes.getBody().length <= 100) {
if(urlList.containsKey(urlhref)){
Integer failCount = urlList.get(urlhref);
if(failCount > 3){
System.out.println("下载失败:" + cl + " / " + pdfFile +" " + urlhref);
return;
}
failCount++;
urlList.put(urlhref , failCount);
}else{
urlList.put(urlhref , 1);
}
createPDF(folder , cl , pdfFile , urlhref);
}else{
if (!destFile.exists()) {
try {
destFile.createNewFile();
} catch (Exception e) {
e.printStackTrace();
}
}
try (FileOutputStream out = new FileOutputStream(destFile);) {
out.write(bytes.getBody(), 0, bytes.getBody().length);
out.flush();
} catch (Exception e) {
e.printStackTrace();
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
最终成果:
文件夹分类存放
pdf文件
lotato 可以将任意网页转为 Web 应用,让你在电脑上体验移动网页带来的轻便和快捷。
使用 Web 应用代替原生应用有着诸多好处,节省设备的存储空间,降低内存占用,有的网页比应用程序更加简单清爽,使用体验更好。手机上的浏览器一般都有「将网页保存到桌面」的选项,微信、支付宝也推出了小程序。那在电脑上该怎么办?
你可以尝试一下这个叫 Flotato 的 Mac 应用,它可以将任意网页转为 Web 应用,在电脑上体验移动网页带来的轻便和快捷。
我们之前给大家分享过一些好用的在线工具,用它们可以满足很多日常工作的需求,比如格式转换、压缩图片、下载视频。把这些工具收藏到书签里,需要的时候打开浏览器就可以了,非常方便。最近,我们对这些在线工具进行了重新整理,不管你用的是 Mac 还是 PC,都值得收藏。
关注极客之选公众号(GeekChoice),回复关键词「在线工具」,获取全部网页工具地址。
*请认真填写需求信息,我们会在24小时内与您取得联系。