当今数字化时代,PDF文档已成为我们传递和保存信息的重要形式之一。然而,有时候我们需要将这些PDF文档内容转换为HTML网页或图片,以便更好地展示和传播。使用首助编辑高手软件,您可以轻松实现这一目标,批量转换PDF文档为HTML网页和图片。下面,让我们一起来了解这款软件的独特功能及具体操作步骤。
一、专业且高效的PDF转换工具
它是一款专门针对PDF文档转换等强大功能的专业软件,它不仅具备高效稳定的性能,还拥有丰富的功能和工具,可以满足您各种不同的PDF转换需求。通过这款软件,您可以轻松将PDF文档批量转为HTML网页和图片,提高工作效率。
二、具体步骤:如何使用软件实现PDF文档批量转为HTML网页与图片
1.安装并启动软件,其中支持AI文章创作、魔法绘图、图片批量处理、文本批量操作,点击“PDF工具箱”功能模块。
2.如果要将文档转为html,就将格式转换切换为“pdf转html”,点击“添加文件”按钮,选择需要转换的pdf文档,支持同时添加多个文件。
3.选择新文件保存位置,支持保存在原文件相同位置,或者指定位置
4.如果选择指定位置的话,可以进入“选择新位置”窗口,选择好文件的保存路径,电脑的任意文件夹都行
5.点击“开始转换”按钮,等待软件自动完成转换过程。等转换完成,可以看到pdf文档均被转为html
6.如果想要将pdf转为图片,可以将格式转换选项切换为“pdf转图片”,再去转换,转换后一组图片一个文件夹自动分类保存着,双击文件件进去查看,pdf均被转为图片格式了
三、软件的优势特点
高效稳定:软件具备高效稳定的转换性能,可以快速批量处理大量PDF文档,保证转换过程的流畅与稳定。
多样化的输出格式:除了支持转换为HTML网页和图片外,该软件还支持其他多种格式,,满足您多样化的需求。
丰富的编辑功能:还提供了丰富的编辑工具和功能,如文本编辑、图像处理、AI文章创作、魔法绘图等等。
个性化设置:您可以右击控制面板,其中支持多种软件皮肤的选择,以满足特定的需求和喜好。
四、总结
软件以其专业高效的功能和特点,为您的PDF文档批量转为HTML网页和图片提供了便捷的解决方案。通过简单的操作步骤和强大的编辑功能,您可以轻松实现各种PDF文档的转换和处理。这款软件不仅提高了您的工作效率和质量,还为您的其他编辑和处理需求提供了全面的支持。如果您还在为繁琐的PDF转换过程烦恼,不妨尝试一下首助编辑高手软件,相信它会成为您工作中的得力助手。
篇文章我们讲解了webpack中的loader,并且使用less、less-loader、css-loader、style-loader,将一个在js中import的less文件通过webpack将样式打包到了页面中,但是我们发现,页面中样式确实是有了,但是页面的样式是通过style标签的形式写入到了页面中,在实际开发中我们其实更倾向于使用link标签导入样式,这时候应该怎么做呢?
一、使用mini-css-extract-plugin插件
这个插件能将CSS提取为独立的文件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap。
首先安装插件
cnpm install mini-css-extract-plugin --save-dev
安装完插件后其实就是设置了,下面是简单的设置信息:
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode:"development", entry:{ "common":"./src/js/common.js", "index":"./src/js/index.js", "login":"./src/js/login.js" }, output:{ filename:"js/[name].js", }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:["common","index"], hash:true }), new HtmlWebpackPlugin({ template:'./src/login.html', filename:'login.html', chunks:["common","login"], hash:true }), new MiniCssExtractPlugin({ filename:'css/[name].css', chunkFilename:'[id].css' }) ], module:{ rules:[ // { // test:/\.less$/, // use:[ // {loader:"style-loader"}, // {loader:"css-loader"}, // {loader:"less-loader"} // ] // } { test:/\.less$/, use:[ { loader:MiniCssExtractPlugin.loader }, "css-loader", "less-loader" ] }, ] } }
在webpack.config.js中我们首先定义插件,然后在plugins项中实例化插件(前面讲到了插件需要安装、定义、实例化三步),最后在module中定义处理less的规则,注释掉的部分是讲解loader的时候使用的,没删掉是要做个比较。
plugins项中mini-css-extract-plugin的实例化参数filename其实和output,html-webpack-plugin中定义的filename,完全一样,就是给输出文件起名字(有人可能会说不是在output中定义了吗,其实webpack入口与输出只是js,其他的是靠插件或者loader来处理,所用不要弄混)。
chunkFilename和html-webpack-plugin中的chunk类似,但是后面的[id].css不好理解(实在明白就这样写就行,固化的不会变),其实这个地方没法写实际具体的名字的,因为这是下面的loader中mini-css-extract-plugin插件内部自己产生的。
再来看rules中的定义,我们去掉了style-loader,因为我们不是要把样式写的页面中,我们是希望link单独的css文件。规则的意思就是遇到js中导入的以.less为结尾的文件使用less-loader来处理,然后转换成css,然后让css-loader处理样式内部的一些关于url,或者@import等一些css的问题,然后交给下一个loader,这个时候的loader变成了mini-css-extract-plugin中的loader了,这个laoder就是将css单独提取出来放入页面中,如下图:
二、处理图片资源
页面中有三种图片的引用方式,一种是html页面中的 img标签,一种是样式中类似background:url(),一种是是脚本中创建图片并插入页面的。那么我们就将这三种方式都尝试一下。项目目录如下图:
增加了三个图片,其实就是一个图片就是名字不一样而已。然后分别修改less文件,js文件,html文件,各个文件内容如下:
index.less
index.js
index.html
图片资源的处理有很多loader可以用,这里我们使用url-loader,对于页面中的img标签,我们使用html-withimg-loader。
安装loader:
cnpm install url-loader html-withimg-loader --save-dev
然后配置webpack.config.js:
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode:"development", entry:{ "common":"./src/js/common.js", "index":"./src/js/index.js", "login":"./src/js/login.js" }, output:{ filename:"js/[name].js", }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'./src/index.html', filename:'index.html', chunks:["common","index"], hash:true }), new HtmlWebpackPlugin({ template:'./src/login.html', filename:'login.html', chunks:["common","login"], hash:true }), new MiniCssExtractPlugin({ filename:'css/[name].css', chunkFilename:'[id].css' }) ], module:{ rules:[ { test:/\.less$/, use:[ { loader:MiniCssExtractPlugin.loader, options:{ publicPath:"../" } }, "css-loader", "less-loader" ] }, { test:/\.(png|svg|jpg|gif)$/, use:[ { loader:'url-loader', options:{ limit:10240, name:"imgs/[name].[ext]", } } ] }, { test:/\.(htm|html)$/, use:["html-withimg-loader"] } ] } }
这里需要注意几点:
第一、minicssextractplugin中添加了一个配置publicPath,为什么不把它放到output中?因为output中的pubicPath会影响所有路径。这里面我们只是想让css-loader处理完css后只解决样式表里的路径问题。
第二、url-loader,limit参数,当图片文件小于10K的时候,将文件转换成dataUrl格式的图片减少链接请求,name参数就是生成的文件名称,当然前面的imgs是dist目录下的imgs文件夹。
第三、遇到html或者htm结尾的文件时使用html-withimg-loader处理里面的图片资源。
前端的模块化开发不建议在页面中直接使用图片链接,要在js中导入图片,但我感觉不太现实,毕竟img标签不是摆设。
接下来运行 npx webpack命令,效果如下:
我们的图片是50多K大小所以dist目录下生成了imgs文件夹,并且将src中的图片考了过来。
如果我们将limit的值改为102400后,图片将直接转换成dataurl格式,不在保存到dist目录下,入下图:
我们可以发现他们的链接地址是有区别的。
三、总结
我们分了五节内容简单的描述了webpack4最基本的一些知识点,主要包括:
1、安装
前提条件安装node
在项目中使用npm init -y,初始化项目,主要是创建了一个package.json的文件,用来记录项目信息以及依赖关系。
为了避免插件或者loader下载不了,介绍了cnpm。
2、入口与输出
webpack.config.jswebpack的配置文件
npx webpack运行webpack的命令
最基本的入口与输出的概念
3、插件
clear-webpack-plugin 清除dist目录的插件
html-webpack-plugin 简化html创建的一个插件,并且关联js
mini-css-extract-plugin 单独提起css为文件的插件
4、加载器(loader)
model模式(开发模式,产品模式)
less-loader、css-loader、style-loader、url-loader、html-withimg-loader
这些知识点只是让初学者快速的跑起来一个webpack,避免踩坑,在实际的项目中遇到问题时可以知道具体知道从哪方面入手来解决问题。
如果内容中有错误,欢迎大家指正。谢谢!
两天有个客户需要把网页转为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文件
*请认真填写需求信息,我们会在24小时内与您取得联系。