Bolb和URL.createObjectURL導出文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
        table {
            border-collapse: collapse
        }
    </style>
    <table border="1">
        <caption>花名冊</caption>
        <tr>
            <th>姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>
    <a href="">導出表格</a>
    <script>
        // bolb生成
        var table = document.getElementsByTagName('table')[0].outerHTML
        var html = "<html><head><meta charset='utf-8' /></head><body>" + table + "</body></html>"
        var blob = new Blob([html], { type: "application/vnd.ms-excel" })
        // bolb賦給a標簽
        var a = document.getElementsByTagName("a")[0]
        a.href = URL.createObjectURL(blob)
        a.download = "花名冊.xls"

        // Bolb導出文件格式
        /*
        'doc'        => 'application/msword',
        'bin'        => 'application/octet-stream',
        'exe'        => 'application/octet-stream',
        'so'        => 'application/octet-stream',
        'dll'        => 'application/octet-stream',
        'pdf'        => 'application/pdf',
        'ai'        => 'application/postscript',
        'xls'        => 'application/vnd.ms-excel',
        'ppt'        => 'application/vnd.ms-powerpoint',
        'dir'        => 'application/x-director',
        'js'        => 'application/x-javascript',
        'swf'        => 'application/x-shockwave-flash',
        'xhtml'        => 'application/xhtml+xml',
        'xht'        => 'application/xhtml+xml',
        'zip'        => 'application/zip',
        'mid'        => 'audio/midi',
        'midi'        => 'audio/midi',
        'mp3'        => 'audio/mpeg',
        'rm'        => 'audio/x-pn-realaudio',
        'rpm'        => 'audio/x-pn-realaudio-plugin',
        'wav'        => 'audio/x-wav',
        'bmp'        => 'image/bmp',
        'gif'        => 'image/gif',
        'jpeg'        => 'image/jpeg',
        'jpg'        => 'image/jpeg',
        'png'        => 'image/png',
        'css'        => 'text/css',
        'html'        => 'text/html',
        'htm'        => 'text/html',
        'txt'        => 'text/plain',
        'xsl'        => 'text/xml',
        'xml'        => 'text/xml',
        'mpeg'        => 'video/mpeg',
        'mpg'        => 'video/mpeg',
        'avi'        => 'video/x-msvideo',
        'movie'        => 'video/x-sgi-movie',  
        */
    </script>
</body>
</html>
posted @ 2018-10-31 10:31 魷魚須須閱讀(1589) 評論(0) 收藏舉報
刷新頁面返回頂部
Bolb和URL.createObjectURL導出文件

公告
