首页 > 技术文章 > Bolb和URL.createObjectURL导出文件

huangtonghui 2018-10-31 10:31 原文

<!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>

  

推荐阅读