整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
关软件:
1.mutool 工具 : 免费开源PDF批处理工具,可转PDF至文本/图片/HTML网页
备选:可用其他:如福昕/Abbyy FineReader/万兴PDF/PDFXCview来提取
还有一种方案为: 先用Calibre工具转换PDF成ZIP格式,然后解压成图片
小型PDF文档,直接用Word或WPS打开另存为Html,或在线网页转换也可.
2.img2html 工具 : 批量转换图片->Html网页工具 百度网盘提取码: 84gf
备选:也可自己写python脚本来生成网页,如果简单可直接写成一个批处理
具体流程:
1.使用mutool工具转换pdf文档,生成每页一个图片
2.使用img2html批处理脚本生成简单的index网页
3.在SuperMemo中导入网页,按分割符号Split分割
4.使用Alt+X图片提取,截图识别进行文本内容提取
说明及使用:
以下为mutool工具常见的一些使用命令,非常简单,但功能丰富,灵活,软件开源/速度快/无限制.
mutool工具常见使用案例
PDF文档文本增量
如果只是简单的提取PDF文件内的文本,不含图片,用上面第二条命令,指定-F txt 即可,也可以直接-F html 不加 -O preserve-images 参数即可.
mutool draw -F txt file.pdf 2,3,6-20 后面的数字是转换的页码范围,不加的话默认转换所有
mutool convert -F html -o outfile_name%d.html file.pdf 不加 -O preserve-images 参数
1.使用mutool工具转换pdf到图片,比较轻量/而且免费,具体可以到下图所示的官网下载:
下载客户端工具使用这个链接下载
下载后解压出如下, 我们只需拷贝其中的一个mutool.exe文件至C:\Windows\System32即可
拷贝工具至C盘路径
打开cmd窗口,只执行mutool命令如下(具体的帮助可查看如下官网链接),即代表工具安装正常:
命令行输入mutool命令
PDF转换操作: cmd下进入磁盘指定目录(图片会生成在这,不建议C盘)后执行如下脚本并回车:
方法一:
如下命令指定了PDF文件输出格式,输出为带页码的图片,要进行PDF转换页码为1,3,4,5-12页
mutool convert -F png -o myfile-%d.png ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12
方法二:
mutool draw -F png -o myfile-%d.png ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12
mutool convert -F cbz -o my_zip_file.cbz ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12
方法三:
使用mutool run javascript文件
在本文中我们只用方法一来实现,具体步骤如下:
单PDF转换成多图片
稍等一会我们即可在Windows窗口中看到转换后的图片如下,注意:命令行取消操作则按Ctrl+C
图片提取成功的界面
2.使用img2html工具转换多个图片至html,上面提供下载的是一个批处理,具体你可自己修改:
图片生成网页批处理脚本内容
把bat文件放置于以上图片同一目录,双击执行即可,过一会可看到生成一个index.html文件如下:
放置于图片目录双击img2html生成网页内容如上,可用IE打开
3.在SuperMemo中导入网页,按分割符号Split分割,生成多个子元素主题,具体操作如下:
拷贝所有文件(index.html,所有图片)至多媒体文件夹,具体路径在option选项中下的elements:
用IE浏览器打开index.html,在supermemo中快捷键ctrl+shift+a导入IE中打开的网页如下:
快捷键ctrl+enter打开命令窗口,输入split选首项分割(分割符号即上面我们批处理中设置的):
输入split分割命令选择按自定义分割输入批处理中的分割符如上图:最终分割成了每个图片一个子element元素
4.添加学习计划并对新元素进行增量学习和提取,图片提取使用alt+x , 文字提取使用OCR工具
分支视图中添加学习元素分支视图中开始学习内容
1.图片内容的提取
快捷键Ctrl+F8下载并插入成图片组件alt+左键单击右侧图片组件进行操作
如上图,alt+左键点击,边框变成绿色时即可提取,鼠标中键双击放大,加shift中键双击缩小,鼠标框选释放后alt+x提取,unzoom重置缩放,重置后可再次提取.生成的图片会成为当前元素子元素
提取内容结果如下: (提示:你也可以直接用Ctrl+Shift+M使用预定义模版来批量改变内容样式)
删除内容图片,并添加内容(相关笔记)
2.文本内容的提取
因为针对PDF导入并分割的是图片,因此我们要使用OCR工具进行文本内容提取(任何一个可以截图识文的工具都可以)如quicker/itext/abbyy等,接着只添加一个子元素并粘贴识别内容即可:
使用OCR工具识图并粘贴到新建子元素
我是一只热爱学习的小胖子,如果你也热爱学习,并且对SuperMemo感兴趣,欢迎转发和评论!
言
现实应用环境，会有使用vue开发多页面环境的需求，这些页面拥有共同的依赖，但是却又都是独立的，为了实现vue的多页面打包，可以使用webpack，同时又因为vue-cli自带了webpack，所以我们还可以采用vue-cli本身的配置文件进行多页打包操作。
VUE3多页面打包
方式一：webpack配置
webpack安装参考：[安装 | webpack 中文网]。
直接在package.json同级目录下创建webpack.config.js(创建一个webpack的配置文件即可)，然后在配置文件内输入内容：
/**
*配置
* */
/*path处理模块，可有可无，主要是为了方便路径链接，因为在配置文件内对于参数而言只接受绝对路径，利用path.resovle(__dirname, 相对路径)可以自动生成绝对路径，此模块为webpack自带*/
let path = require('path')
/*vue-loader,vue加载插件，使用npm install vue-loader直接安装即可
*同时对于vue3而言需要单独安装@vue/compiler-sfc,vue2的话是vue-compiler
*/
let vueLoader = require('vue-loader')
/*html-webpack-plugin,模版处理插件，如果存在多个html模版就需要安装
*直接用npm install html-webpack-plugin
*/
let htmlWebPackPlugin = require('html-webpack-plugin')
/**
*compression-webpack-plugin，这是一个可选插件，目的是为了对打包后的文件进行压缩，因为打包后会形成一个大的js文件，文件越大网页打开速度越慢。
*/
let compressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
/*打包入口，多入口就是从这里来的，当打包时，会去找到每一个入口文件，
并根据这个文件依赖去打包，每一个入口写一个key-value对*/
entry: {
/*key-value格式
key就是标识名称，之所以写成 "/js/index/index" 格式是为了在打包时将文件输出到对应目录，
默认情况下，文件只会输出到output所指定的目录下，之后便没有区分，这里用“/”分割就是利用输出路径时小漏洞形成目录*/
/*value是要打包入口的地址，利用path.resolve处理绝对路径问题*/
'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),
'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')
},
/*文件输出目录，只能有一个，[官方要求](https://www.webpackjs.com/concepts/output/)*/
output: {
/*输出的入口文件的名称，【name】就是刚才上面我们指定的key值，这个值不能通过外部变量或数组动态修改*/
filename: '[name].js',
/*输出目录，也需要指定绝对路径*/
path: path.resolve(__dirname, './dist')
},
/*插件配置与加载*/
plugins: [
/*加载vue文件打包插件*/
new vueLoader.VueLoaderPlugin,
/*html模版打包插件，有几个入口就要用几个，书写顺序与上方入口顺序一致，
如果只有一个，那么所有入口都会通过这一个模版打包*/
new htmlWebPackPlugin({
template: path.resolve(__dirname, './public/html/index.html'),
filename: 'index.html'
}),
new htmlWebPackPlugin({
template: path.resolve(__dirname, './public/html/index2.html'),
filename: 'xxjszx.html'
}),
/*加载压缩插件，将test中查找到的文件类型全部压缩，test的值对应的是一个正则表达式*/
new compressionWebpackPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,
threshold: 100000,
deleteOriginalAssets: false
})
],
module:{
/*文件处理规则*/
rules: [
{
/*css处理规则，直接用css-loader插件默认加载，css-loader插件也需要使用npm安装*/
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
/*vue文件加载规则*/
test: /\.vue$/,
use: ['vue-loader']
},
{
/*图片文件处理规则，使用url-loader插件改写文件名并放到指定位置*/
test: /\.(jp?g|png|svg|ico)$/,
use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'
}
]
}
}方式二：vue-cli配置
vue-cli目前已不提供vue.config.js配置文件，但是我们可以手动在package.json同级目录创建一个，创建成功后此文件将作为优先调用对象，结构与内容同webpack类似（其实就是内置的webpack配置），可参考官网配置解释：配置参考 | Vue CLI：
module.exports = {
/*pages指定入口，同样是key-value对的形式，只不过是将配置集成到了一起*/
pages: {
/*名称*/
xxjszx: {
/*入口，同上面的entry*/
entry: 'src/entry/xxjszx.js',
/*模版，同上面的html-webpack-plugin插件*/
template: 'public/html/xxjszx.html',
/*输出后的文件名称*/
filename: 'xxjszx.html',
},
index: {
entry: 'src/entry/index.js',
template: 'public/html/index.html',
/*这里是html输出到的文件地址，也可以利用/斜杠表示目录，例如index/index.html就代表创建index目录并把index.html放到目录下*/
filename: 'index.html',
}
}
}vue3多页面直接运行
使用vue.config.js配置好后，直接使用npm run dev命令即可，对应vue的vue-cli-service serve，运行可根据pages定义的key值进行路由调用页面，key值为index那么调用格式就是/index,默认页面是index路由对应页面。如果采用webpack打包是无法直接运行多页面的，需要在打包后部署到服务器上。
节课，我们学习 input 控件中的文件选择功能
表单中的文件上传与我们的生活息息相关，例如：研究生报名考试系统中，上传证件照片的界面。点击浏览按钮 ，会有对应的弹窗 ，提示让我们选择电脑中的证件照片进行上传。
例如：在返乡流调信息表中，流调信息需要我们上传身份证件信息。 "用户咨询反馈" 表单中，需要上传的附件等等，都使用到了文件选择的控件。这些文件选择的控件，在不同浏览器和设备中显示的效果可能不一致，但都可以实现文件选择的功能。
文件选择控件，主要作用就是用来选择本地的某些文件。
实现这个功能的语法结构为：在 input 输入控件上定义 type 属性，赋值为 file。file 就是文件的意思。
打开编辑器，新建一个 input_file.html 文件，自动补全基础代码，在body里添加 form 标签，在 form 里填写 "附件：" ，在文本后面添加一个 input 标签，type 属性值为 file。保存。
在默认浏览器中打开页面，一个选择文件的控件就显示出来。点击选择文件按钮，会出现一个弹窗，选择想要上传的文件，单击选中，点击弹窗上面的打开按钮。文件的名字就显示在按钮区域的后面了。
需要注意的是，这是一个选择文件的控件，还不能实现文件的真正上传，后面我们会介绍如何上传文件。
在IE中打开页面，。。
在火狐中打开页面，。。。
大家注意到了，同为文件选择控件，不同的浏览器实现的效果是不一样的，但都可以实现文件选择的功能。
文件选择控件我们就介绍到这里，大家动手试试吧。
文章配套视频链接「链接」
*请认真填写需求信息，我们会在24小时内与您取得联系。
