w-ui-dwload

w-ui-dwload

new w-ui-dwload(vo, optopt) → {Object}

Description:
  • 前端UI下載套件

Source:
Example
let WUiDwload = window['w-ui-dwload']
// console.log(WUiDwload)

//wuidw
let vo = {
    updateLoading: (v)=>{
        console.log('updateLoading', v)
    },
    alert: (v, t)=>{
        console.log('alert', v, t)
    },
    downloadFileById: ()=>{
    },
}
let wuidw = WUiDwload(vo, {
    keyFunDownloadFileById: 'downloadFileById',
    keyFunUpdateLoading: 'updateLoading',
    keyFunAlert: 'alert',
})
console.log(wuidw)
Parameters:
Name Type Attributes Default Description
vo Object

輸入前端共用操作物件,也就是掛載共用函數之處,例如Vue.prototype

opt Object <optional>
{}

輸入設定物件,預設{}

Properties
Name Type Attributes Default Description
keyFunDownloadFileById String <optional>
'downloadFileById'

輸入於vo內掛載下載檔案函數(downloadFileById)之鍵值字串,預設'downloadFileById'

keyFunUpdateLoading String <optional>
'updateLoading'

輸入於vo內掛載顯示loading函數(updateLoading)之鍵值字串,預設'updateLoading'

keyFunAlert String <optional>
'alert'

輸入於vo內掛載提案彈窗函數(alert)之鍵值字串,預設'alert'

useBrowserView Boolean <optional>
true

輸入當使用下載檔案函數(downloadFileById)時,是否於下載後自動於瀏覽器分頁開啟,預設true

browserViewTypes Array <optional>
['text/plain', 'application/rtf', 'application/json', 'text/csv', 'text/html', 'text/xml', 'application/xml', 'application/pdf', 'image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml', 'image/webp', 'audio/mpeg', 'video/mpeg', 'video/mp4', 'video/webm']

輸入當使用下載檔案函數(downloadFileById)時,識別可自動開啟之檔案類型清單陣列,預設['text/plain', 'application/rtf', 'application/json', 'text/csv', 'text/html', 'text/xml', 'application/xml', 'application/pdf', 'image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml', 'image/webp', 'audio/mpeg', 'video/mpeg', 'video/mp4', 'video/webm']

textErrorDownloadImage String <optional>
'無法下載圖片'

輸入提示無法下載圖片字串,預設'無法下載圖片'

textErrorDownloadTable String <optional>
'無法下載表格數據'

輸入提示無法下載表格數據字串,預設'無法下載表格數據'

textErrorDownloadLtdt String <optional>
'無法下載數據'

輸入提示無法下載數據字串,預設'無法下載數據'

textInvalidElePic String <optional>
'elePic非元素'

輸入提示elePic非元素字串,預設'elePic非元素'

textInvalidEleName String <optional>
'eleName非元素或字串'

輸入提示eleName非元素或字串字串,預設'eleName非元素或字串'

textInvalidEleTable String <optional>
'eleTable非元素'

輸入提示eleTable非元素字串,預設'eleTable非元素'

textInvalidLtdt String <optional>
'ltdt非陣列'

輸入提示ltdt非陣列字串,預設'ltdt非陣列'

textInvalidFileId String <optional>
'無檔案主鍵'

輸入提示無檔案主鍵字串,預設'無檔案主鍵'

textInvalidKeyFilename String <optional>
'無檔案名稱主鍵'

輸入提示無檔案名稱主鍵字串,預設'無檔案名稱主鍵'

textInvalidFilename String <optional>
'無檔案名稱'

輸入提示無檔案名稱字串,預設'無檔案名稱'

textInvalidFileU8a String <optional>
'無檔案內容'

輸入提示無檔案內容字串,預設'無檔案內容'

textInvalidFileType String <optional>
'無檔案類型'

輸入提示無檔案類型字串,預設'無檔案類型'

textDownloadingFile String <optional>
'開始下載檔案'

輸入提示開始下載檔案字串,預設'開始下載檔案'

textDownloadFileSuccessfully String <optional>
'下載檔案成功'

輸入提示下載檔案成功字串,預設'下載檔案成功'

textDownloadFileFailed String <optional>
'下載檔案失敗'

輸入提示下載檔案失敗字串,預設'下載檔案失敗'

Returns:

回傳各下載函數物件,包括'downloadPic','downloadTable','downloadLtdt','downloadFile'

Type
Object

Methods

(async, static) downloadFile(file, setProg, optopt) → {Promise}

Description:
  • 前端呼叫函數(前後端)下載檔案

Source:
Example
let WUiDwload = window['w-ui-dwload']
// console.log(WUiDwload)

let file = {
    'id': 'id-for-file',
}

//wuidw
let vo = {
    updateLoading: (v)=>{
        console.log('updateLoading', v)
    },
    alert: (v, t)=>{
        console.log('alert', v, t)
    },
    downloadFileById: (fileId)=>{
        //記得添加BOM
        let u8a = wsemi.str2u8arr(`\ufeff中文測試
Plain text, unformatted text
Text file, a type of computer file opened by most text software
Text string, a sequence of characters manipulated by software
Text message, a short electronic message designed for communication between mobile phone users
Text (Chrome app), a text editor for the Google Chrome web browser`)
        return {
            fileName:'name-for-file',
            u8a,
            type:'text/plain',
        }
    },
}
let wuidw = WUiDwload(vo, {
    keyFunDownloadFileById: 'downloadFileById',
    keyFunUpdateLoading: 'updateLoading',
    keyFunAlert: 'alert',
})
console.log(wuidw)

function dw(){
    wuidw.downloadFile(file)
}
Parameters:
Name Type Attributes Default Description
file Object

輸入檔案資料物件,至少需有id欄位

setProg function null

輸入下載階段調用提供進度函數,需建構並由按鈕或進度視窗提供

opt Object <optional>
{}

輸入設定物件,預設{}

Properties
Name Type Attributes Default Description
timeDelay Number <optional>
500

輸入當使用updateLoading時,因畫面要渲染loading可能需延遲顯示才能看見動畫,故需給予延遲時間,單位ms,預設500

useAlert Boolean <optional>
true

輸入是否使用alert布林值,預設true

useUpdateLoading Boolean <optional>
true

輸入是否使用updateLoading布林值,預設true

Returns:

回傳Promise,resolve代表執行結束,不會有reject,將由console.log或alert(若有)顯示發生之錯誤訊息

Type
Promise

(async, static) downloadLtdt(ltdt, eleName, optopt) → {Promise}

Description:
  • 前端將ltdt數據下載成為Excel檔(*.xlsx)

Source:
Example
let WUiDwload = window['w-ui-dwload']
// console.log(WUiDwload)

let ltdt = [
    {
        "firstName": "John",
        "lastName": "Smith",
        "sex": "male",
        "age(年齡)": 25,
    },
    {
        "firstName": "Worthly",
        "lastName": "Bill",
        "sex": "female",
        "age(年齡)": 22,
    },
    {
        "firstName": "Sandola",
        "lastName": "Dell",
        "sex": "male",
        "age(年齡)": 31,
    },
]

//wuidw
let vo = {
    updateLoading: (v)=>{
        console.log('updateLoading', v)
    },
    alert: (v, t)=>{
        console.log('alert', v, t)
    },
    downloadFileById: ()=>{
    },
}
let wuidw = WUiDwload(vo, {
    keyFunDownloadFileById: 'downloadFileById',
    keyFunUpdateLoading: 'updateLoading',
    keyFunAlert: 'alert',
})
console.log(wuidw)

function dw(){
    let eleName = document.querySelector('#name')
    wuidw.downloadLtdt(ltdt, eleName)
    // let name = 'ltdt-name'
    // wuidw.downloadLtdt(ltdt, name)
}
Parameters:
Name Type Attributes Default Description
ltdt Array

輸入數據陣列

eleName HTMLElement | String

輸入表名所在元素或表名字串

opt Object <optional>
{}

輸入設定物件,預設{}

Properties
Name Type Attributes Default Description
nameSheet String <optional>
'data'

輸入sheet名稱字串,預設'data'

timeDelay Number <optional>
500

輸入當使用updateLoading時,因畫面要渲染loading可能需延遲顯示才能看見動畫,故需給予延遲時間,單位ms,預設500

defName String <optional>
'table'

輸入若無有效表名時預設名稱字串,預設'table'

useAlert Boolean <optional>
true

輸入是否使用alert布林值,預設true

useUpdateLoading Boolean <optional>
true

輸入是否使用updateLoading布林值,預設true

Returns:

回傳Promise,resolve代表執行結束,不會有reject,將由console.log或alert(若有)顯示發生之錯誤訊息

Type
Promise

(async, static) downloadPic(elePic, eleName, optopt) → {Promise}

Description:
  • 前端將dom下載成為圖片

Source:
Example
let WUiDwload = window['w-ui-dwload']
// console.log(WUiDwload)

//wuidw
let vo = {
    updateLoading: (v)=>{
        console.log('updateLoading', v)
    },
    alert: (v, t)=>{
        console.log('alert', v, t)
    },
    downloadFileById: ()=>{
    },
}
let wuidw = WUiDwload(vo, {
    keyFunDownloadFileById: 'downloadFileById',
    keyFunUpdateLoading: 'updateLoading',
    keyFunAlert: 'alert',
})
console.log(wuidw)

function dw(){
    let eleTar = document.querySelector('#container')
    let eleName = document.querySelector('#name')
    wuidw.downloadPic(eleTar, eleName)
}
Parameters:
Name Type Attributes Default Description
elePic HTMLElement

輸入圖片所在元素

eleName HTMLElement | String

輸入圖名所在元素或圖名字串

opt Object <optional>
{}

輸入設定物件,預設{}

Properties
Name Type Attributes Default Description
scale Number <optional>
3

輸入放大比率數字,代表反鋸齒(anti-aliasing),預設3

timeDelay Number <optional>
500

輸入當使用updateLoading時,因畫面要渲染loading可能需延遲顯示才能看見動畫,故需給予延遲時間,單位ms,預設500

defName String <optional>
'pic'

輸入若無有效圖名時預設名稱字串,預設'pic'

useAlert Boolean <optional>
true

輸入是否使用alert布林值,預設true

useUpdateLoading Boolean <optional>
true

輸入是否使用updateLoading布林值,預設true

Returns:

回傳Promise,resolve代表執行結束,不會有reject,將由console.log或alert(若有)顯示發生之錯誤訊息

Type
Promise

(async, static) downloadTable(eleTable, eleName, optopt) → {Promise}

Description:
  • 前端將dom(table)內數據下載成為Excel檔(*.xlsx)

Source:
Example
let WUiDwload = window['w-ui-dwload']
// console.log(WUiDwload)

//wuidw
let vo = {
    updateLoading: (v)=>{
        console.log('updateLoading', v)
    },
    alert: (v, t)=>{
        console.log('alert', v, t)
    },
    downloadFileById: ()=>{
    },
}
let wuidw = WUiDwload(vo, {
    keyFunDownloadFileById: 'downloadFileById',
    keyFunUpdateLoading: 'updateLoading',
    keyFunAlert: 'alert',
})
console.log(wuidw)

function dw(){
    let eleTar = document.querySelector('#container')
    let eleName = document.querySelector('#name')
    wuidw.downloadTable(eleTar, eleName)
}
Parameters:
Name Type Attributes Default Description
eleTable HTMLElement

輸入表格所在元素

eleName HTMLElement | String

輸入表名所在元素或表名字串

opt Object <optional>
{}

輸入設定物件,預設{}

Properties
Name Type Attributes Default Description
nameSheet String <optional>
'data'

輸入sheet名稱字串,預設'data'

timeDelay Number <optional>
500

輸入當使用updateLoading時,因畫面要渲染loading可能需延遲顯示才能看見動畫,故需給予延遲時間,單位ms,預設500

defName String <optional>
'table'

輸入若無有效表名時預設名稱字串,預設'table'

useAlert Boolean <optional>
true

輸入是否使用alert布林值,預設true

useUpdateLoading Boolean <optional>
true

輸入是否使用updateLoading布林值,預設true

Returns:

回傳Promise,resolve代表執行結束,不會有reject,將由console.log或alert(若有)顯示發生之錯誤訊息

Type
Promise