整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
關(guān)軟件:
1.mutool 工具 : 免費(fèi)開源PDF批處理工具,可轉(zhuǎn)PDF至文本/圖片/HTML網(wǎng)頁(yè)
備選:可用其他:如福昕/Abbyy FineReader/萬(wàn)興PDF/PDFXCview來提取
還有一種方案為: 先用Calibre工具轉(zhuǎn)換PDF成ZIP格式,然后解壓成圖片
小型PDF文檔,直接用Word或WPS打開另存為Html,或在線網(wǎng)頁(yè)轉(zhuǎn)換也可.
2.img2html 工具 : 批量轉(zhuǎn)換圖片->Html網(wǎng)頁(yè)工具 百度網(wǎng)盤提取碼: 84gf
備選:也可自己寫python腳本來生成網(wǎng)頁(yè),如果簡(jiǎn)單可直接寫成一個(gè)批處理
具體流程:
1.使用mutool工具轉(zhuǎn)換pdf文檔,生成每頁(yè)一個(gè)圖片
2.使用img2html批處理腳本生成簡(jiǎn)單的index網(wǎng)頁(yè)
3.在SuperMemo中導(dǎo)入網(wǎng)頁(yè),按分割符號(hào)Split分割
4.使用Alt+X圖片提取,截圖識(shí)別進(jìn)行文本內(nèi)容提取
說明及使用:
以下為mutool工具常見的一些使用命令,非常簡(jiǎn)單,但功能豐富,靈活,軟件開源/速度快/無限制.
mutool工具常見使用案例
PDF文檔文本增量
如果只是簡(jiǎn)單的提取PDF文件內(nèi)的文本,不含圖片,用上面第二條命令,指定-F txt 即可,也可以直接-F html 不加 -O preserve-images 參數(shù)即可.
mutool draw -F txt file.pdf 2,3,6-20 后面的數(shù)字是轉(zhuǎn)換的頁(yè)碼范圍,不加的話默認(rèn)轉(zhuǎn)換所有
mutool convert -F html -o outfile_name%d.html file.pdf 不加 -O preserve-images 參數(shù)
1.使用mutool工具轉(zhuǎn)換pdf到圖片,比較輕量/而且免費(fèi),具體可以到下圖所示的官網(wǎng)下載:
下載客戶端工具使用這個(gè)鏈接下載
下載后解壓出如下, 我們只需拷貝其中的一個(gè)mutool.exe文件至C:\Windows\System32即可
拷貝工具至C盤路徑
打開cmd窗口,只執(zhí)行mutool命令如下(具體的幫助可查看如下官網(wǎng)鏈接),即代表工具安裝正常:
命令行輸入mutool命令
PDF轉(zhuǎn)換操作: cmd下進(jìn)入磁盤指定目錄(圖片會(huì)生成在這,不建議C盤)后執(zhí)行如下腳本并回車:
方法一:
如下命令指定了PDF文件輸出格式,輸出為帶頁(yè)碼的圖片,要進(jìn)行PDF轉(zhuǎn)換頁(yè)碼為1,3,4,5-12頁(yè)
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文件
在本文中我們只用方法一來實(shí)現(xiàn),具體步驟如下:
單PDF轉(zhuǎn)換成多圖片
稍等一會(huì)我們即可在Windows窗口中看到轉(zhuǎn)換后的圖片如下,注意:命令行取消操作則按Ctrl+C
圖片提取成功的界面
2.使用img2html工具轉(zhuǎn)換多個(gè)圖片至html,上面提供下載的是一個(gè)批處理,具體你可自己修改:
圖片生成網(wǎng)頁(yè)批處理腳本內(nèi)容
把bat文件放置于以上圖片同一目錄,雙擊執(zhí)行即可,過一會(huì)可看到生成一個(gè)index.html文件如下:
放置于圖片目錄雙擊img2html生成網(wǎng)頁(yè)內(nèi)容如上,可用IE打開
3.在SuperMemo中導(dǎo)入網(wǎng)頁(yè),按分割符號(hào)Split分割,生成多個(gè)子元素主題,具體操作如下:
拷貝所有文件(index.html,所有圖片)至多媒體文件夾,具體路徑在option選項(xiàng)中下的elements:
用IE瀏覽器打開index.html,在supermemo中快捷鍵ctrl+shift+a導(dǎo)入IE中打開的網(wǎng)頁(yè)如下:
快捷鍵ctrl+enter打開命令窗口,輸入split選首項(xiàng)分割(分割符號(hào)即上面我們批處理中設(shè)置的):
輸入split分割命令選擇按自定義分割輸入批處理中的分割符如上圖:最終分割成了每個(gè)圖片一個(gè)子element元素
4.添加學(xué)習(xí)計(jì)劃并對(duì)新元素進(jìn)行增量學(xué)習(xí)和提取,圖片提取使用alt+x , 文字提取使用OCR工具
分支視圖中添加學(xué)習(xí)元素分支視圖中開始學(xué)習(xí)內(nèi)容
1.圖片內(nèi)容的提取
快捷鍵Ctrl+F8下載并插入成圖片組件alt+左鍵單擊右側(cè)圖片組件進(jìn)行操作
如上圖,alt+左鍵點(diǎn)擊,邊框變成綠色時(shí)即可提取,鼠標(biāo)中鍵雙擊放大,加shift中鍵雙擊縮小,鼠標(biāo)框選釋放后alt+x提取,unzoom重置縮放,重置后可再次提取.生成的圖片會(huì)成為當(dāng)前元素子元素
提取內(nèi)容結(jié)果如下: (提示:你也可以直接用Ctrl+Shift+M使用預(yù)定義模版來批量改變內(nèi)容樣式)
刪除內(nèi)容圖片,并添加內(nèi)容(相關(guān)筆記)
2.文本內(nèi)容的提取
因?yàn)獒槍?duì)PDF導(dǎo)入并分割的是圖片,因此我們要使用OCR工具進(jìn)行文本內(nèi)容提取(任何一個(gè)可以截圖識(shí)文的工具都可以)如quicker/itext/abbyy等,接著只添加一個(gè)子元素并粘貼識(shí)別內(nèi)容即可:
使用OCR工具識(shí)圖并粘貼到新建子元素
我是一只熱愛學(xué)習(xí)的小胖子,如果你也熱愛學(xué)習(xí),并且對(duì)SuperMemo感興趣,歡迎轉(zhuǎn)發(fā)和評(píng)論!
言
現(xiàn)實(shí)應(yīng)用環(huán)境，會(huì)有使用vue開發(fā)多頁(yè)面環(huán)境的需求，這些頁(yè)面擁有共同的依賴，但是卻又都是獨(dú)立的，為了實(shí)現(xiàn)vue的多頁(yè)面打包，可以使用webpack，同時(shí)又因?yàn)関ue-cli自帶了webpack，所以我們還可以采用vue-cli本身的配置文件進(jìn)行多頁(yè)打包操作。
VUE3多頁(yè)面打包
方式一：webpack配置
webpack安裝參考：[安裝 | webpack 中文網(wǎng)]。
直接在package.json同級(jí)目錄下創(chuàng)建webpack.config.js(創(chuàng)建一個(gè)webpack的配置文件即可)，然后在配置文件內(nèi)輸入內(nèi)容：
/**
*配置
* */
/*path處理模塊，可有可無，主要是為了方便路徑鏈接，因?yàn)樵谂渲梦募?nèi)對(duì)于參數(shù)而言只接受絕對(duì)路徑，利用path.resovle(__dirname, 相對(duì)路徑)可以自動(dòng)生成絕對(duì)路徑，此模塊為webpack自帶*/
let path = require('path')
/*vue-loader,vue加載插件，使用npm install vue-loader直接安裝即可
*同時(shí)對(duì)于vue3而言需要單獨(dú)安裝@vue/compiler-sfc,vue2的話是vue-compiler
*/
let vueLoader = require('vue-loader')
/*html-webpack-plugin,模版處理插件，如果存在多個(gè)html模版就需要安裝
*直接用npm install html-webpack-plugin
*/
let htmlWebPackPlugin = require('html-webpack-plugin')
/**
*compression-webpack-plugin，這是一個(gè)可選插件，目的是為了對(duì)打包后的文件進(jìn)行壓縮，因?yàn)榇虬髸?huì)形成一個(gè)大的js文件，文件越大網(wǎng)頁(yè)打開速度越慢。
*/
let compressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
/*打包入口，多入口就是從這里來的，當(dāng)打包時(shí)，會(huì)去找到每一個(gè)入口文件，
并根據(jù)這個(gè)文件依賴去打包，每一個(gè)入口寫一個(gè)key-value對(duì)*/
entry: {
/*key-value格式
key就是標(biāo)識(shí)名稱，之所以寫成 "/js/index/index" 格式是為了在打包時(shí)將文件輸出到對(duì)應(yīng)目錄，
默認(rèn)情況下，文件只會(huì)輸出到output所指定的目錄下，之后便沒有區(qū)分，這里用“/”分割就是利用輸出路徑時(shí)小漏洞形成目錄*/
/*value是要打包入口的地址，利用path.resolve處理絕對(duì)路徑問題*/
'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),
'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')
},
/*文件輸出目錄，只能有一個(gè)，[官方要求](https://www.webpackjs.com/concepts/output/)*/
output: {
/*輸出的入口文件的名稱，【name】就是剛才上面我們指定的key值，這個(gè)值不能通過外部變量或數(shù)組動(dòng)態(tài)修改*/
filename: '[name].js',
/*輸出目錄，也需要指定絕對(duì)路徑*/
path: path.resolve(__dirname, './dist')
},
/*插件配置與加載*/
plugins: [
/*加載vue文件打包插件*/
new vueLoader.VueLoaderPlugin,
/*html模版打包插件，有幾個(gè)入口就要用幾個(gè)，書寫順序與上方入口順序一致，
如果只有一個(gè)，那么所有入口都會(huì)通過這一個(gè)模版打包*/
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的值對(duì)應(yīng)的是一個(gè)正則表達(dá)式*/
new compressionWebpackPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,
threshold: 100000,
deleteOriginalAssets: false
})
],
module:{
/*文件處理規(guī)則*/
rules: [
{
/*css處理規(guī)則，直接用css-loader插件默認(rèn)加載，css-loader插件也需要使用npm安裝*/
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
/*vue文件加載規(guī)則*/
test: /\.vue$/,
use: ['vue-loader']
},
{
/*圖片文件處理規(guī)則，使用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配置文件，但是我們可以手動(dòng)在package.json同級(jí)目錄創(chuàng)建一個(gè)，創(chuàng)建成功后此文件將作為優(yōu)先調(diào)用對(duì)象，結(jié)構(gòu)與內(nèi)容同webpack類似（其實(shí)就是內(nèi)置的webpack配置），可參考官網(wǎng)配置解釋：配置參考 | Vue CLI：
module.exports = {
/*pages指定入口，同樣是key-value對(duì)的形式，只不過是將配置集成到了一起*/
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就代表創(chuàng)建index目錄并把index.html放到目錄下*/
filename: 'index.html',
}
}
}vue3多頁(yè)面直接運(yùn)行
使用vue.config.js配置好后，直接使用npm run dev命令即可，對(duì)應(yīng)vue的vue-cli-service serve，運(yùn)行可根據(jù)pages定義的key值進(jìn)行路由調(diào)用頁(yè)面，key值為index那么調(diào)用格式就是/index,默認(rèn)頁(yè)面是index路由對(duì)應(yīng)頁(yè)面。如果采用webpack打包是無法直接運(yùn)行多頁(yè)面的，需要在打包后部署到服務(wù)器上。
節(jié)課，我們學(xué)習(xí) input 控件中的文件選擇功能
表單中的文件上傳與我們的生活息息相關(guān)，例如：研究生報(bào)名考試系統(tǒng)中，上傳證件照片的界面。點(diǎn)擊瀏覽按鈕 ，會(huì)有對(duì)應(yīng)的彈窗 ，提示讓我們選擇電腦中的證件照片進(jìn)行上傳。
例如：在返鄉(xiāng)流調(diào)信息表中，流調(diào)信息需要我們上傳身份證件信息。 "用戶咨詢反饋" 表單中，需要上傳的附件等等，都使用到了文件選擇的控件。這些文件選擇的控件，在不同瀏覽器和設(shè)備中顯示的效果可能不一致，但都可以實(shí)現(xiàn)文件選擇的功能。
文件選擇控件，主要作用就是用來選擇本地的某些文件。
實(shí)現(xiàn)這個(gè)功能的語(yǔ)法結(jié)構(gòu)為：在 input 輸入控件上定義 type 屬性，賦值為 file。file 就是文件的意思。
打開編輯器，新建一個(gè) input_file.html 文件，自動(dòng)補(bǔ)全基礎(chǔ)代碼，在body里添加 form 標(biāo)簽，在 form 里填寫 "附件：" ，在文本后面添加一個(gè) input 標(biāo)簽，type 屬性值為 file。保存。
在默認(rèn)瀏覽器中打開頁(yè)面，一個(gè)選擇文件的控件就顯示出來。點(diǎn)擊選擇文件按鈕，會(huì)出現(xiàn)一個(gè)彈窗，選擇想要上傳的文件，單擊選中，點(diǎn)擊彈窗上面的打開按鈕。文件的名字就顯示在按鈕區(qū)域的后面了。
需要注意的是，這是一個(gè)選擇文件的控件，還不能實(shí)現(xiàn)文件的真正上傳，后面我們會(huì)介紹如何上傳文件。
在IE中打開頁(yè)面，。。
在火狐中打開頁(yè)面，。。。
大家注意到了，同為文件選擇控件，不同的瀏覽器實(shí)現(xiàn)的效果是不一樣的，但都可以實(shí)現(xiàn)文件選擇的功能。
文件選擇控件我們就介紹到這里，大家動(dòng)手試試吧。
文章配套視頻鏈接「鏈接」
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
