整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
關軟件:
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小時內與您取得聯系。
