前台实现下载xml功能

阅读目录

介绍问题
MIME TYPE
解决问题

介绍问题

　　平时我们通过href去链接文件时，一般情况是对于zip、jar等下载功能，而对于xml、css、html、js等都是查看功能。

　　现在下面的代码可以直接生成xml格式的字符串，从而达到生成xml文件，以至于可以下载xml文件。

　　其中主要的代码：data:text/xml;charset=utf-8 ，其实这是content-Type，也就是下面会提到的MIME TYPE（在《http权威指南》一书中曾经提到过）

MIME TYPE

因特网上有数千种不同的数据类型,HTTP 仔细地给每种要通过 Web 传输的对象都打上了名为 MIME 类型(MIME type)的数据格式标签。最初设计 MIME (Multipurpose Internet Mail Extension,多用途因特网邮件扩展)是为了解决在不同的电子邮件系统之间搬移报文时存在的问题。MIME 在电子邮件系统中工作得非常好,因此 HTTP 也采纳了它,用它来描述并标记多媒体内容。

Web 服务器会为所有 HTTP 对象数据附加一个 MIME 类型(参见下图)。当 Web 浏览器从服务器中取回一个对象时,会去查看相关的 MIME 类型,看看它是否知道应该如何处理这个对象。大多数浏览器都可以处理数百种常见的对象类型:显示图片文件、解析并格式化 HTML 文件、通过计算机声卡播放音频文件,或者运行外部插件软件来处理特殊格式的数据。

MIME 类型是一种文本标记,表示一种主要的对象类型和一个特定的子类型,中间

由一条斜杠来分隔。

HTML 格式的文本文档由 text/html 类型来标记。
普通的 ASCII 文本文档由 text/plain 类型来标记。
JPEG 格式的图片为 image/jpeg 类型。
GIF 格式的图片为 image/gif 类型。
Apple 的 QuickTime 电影为 video/quicktime 类型。
微软的 PowerPoint 演示文件为 application/vnd.ms-powerpoint 类型。

常见的 MIME 类型有数百个,实验性或用途有限的 MIME 类型则更多。这儿提供了一个非常完整的 MIME 类型列表。

解决问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

<script>

    window.onload = function () {

        var html = '<a href="data:text/xml;charset=utf-8,' + encodeURIComponent(text) + '" download="99">下载</a>';

        document.body.innerHTML = html;

    }

    var text = '<?xml version="1.0" encoding="UTF-8"  standalone="yes"?>\

                <config-routing>\

                <array name="Private">\

                    <key name="amount">3</key>\

                    <array name="info">\

                        <key name="name">阿斯顿</key>\

                        <key name="id">1</key>\

                    </array>\

                    <array name="info">\

                        <key name="name">阿斯顿</key>\

                        <key name="ecu_id">2</key>\

                    </array>\

                    <array name="info">\

                        <key name="name">3we</key>\

                        <key name="id">3</key>\

                    </array>\

            </array>\

        </config_routing>';

</script>

</html>

　　Live Demo:https://wanliyuan.github.io/module/test/downloadXml.html

　　源代码：https://github.com/wanliyuan/module/blob/gh-pages/test/downloadXml.html

　　这样就不用传数据给后台，然后由后台去组合xml，再来去下载xml，效率高了些。

　　参考文章：Web 端 js 导出csv文件(使用a标签)