js生成并保存xml文件

• 问题：本来想用js直接对xml进行修改，由于浏览器的信息保护，无法通过js直接操作本地文件
• 解决办法：

  • 通过调用FileSaver.js，保存文件

  • Blob.js是一个跨浏览器的 Blob 实现，可以解决兼容性问题。
    标准 W3C 文件 API Blob 接口不兼容所有浏览器。

  • ajax请求接口，获取数据，写数据，保存为.xml后缀的文件

• 后台接口返回数据格式

[
  {  
      post_date: "2020-07-17 10:02:46", 
      post_title: "js生成xml文件", 
      guid: "url链接"
  }，
  {  
      post_date: "2020-07-17 10:02:46", 
      post_title: "js生成xml文件", 
      guid: "url链接"
  }，
....
]

• html代码

<script src="./js/jquery.js"></script>
<script src="./js/Blob.js"></script>
<script src="./js/FileSaver.js"></script>
<button onclick="generateXML()">创建一个xml文件</button>

• js代码

function generateXML() {
    $.ajax({
        type: "get",
        url: "后台接口",
        success: function (res) {
            var str = '<?xml version="1.0" encoding="utf-8" ?>\n<urlset>\n';
            res.forEach(item=>{
                if (item.guid.indexOf('&')>0) {
                    var reg = new RegExp("&", "g");
                    var url = item.guid.replace(reg,"&amp;");
                    str += "<url><loc>"+url+"</loc><posttitle>"+item.post_title+"</posttitle><postdate>"+item.post_date+"</postdate></url>\n";
                }else{
                    str += "<url><loc>"+item.guid+"</loc><posttitle>"+item.post_title+"</posttitle><postdate>"+item.post_date+"</postdate></url>\n";
                }
            })
            str +="</urlset>";
            // 使用FileSaver.js保存文件
            var file = new File([str], "data.xml", { type: "text/plain;charset=utf-8" });
            saveAs(file);
        }
    })
}

• 中途遇到的问题:EntityRef: expecting ';'
  

  问题： EntityRef: expecting ';'
  百度之后，问题定位为：url中的条件分割符&应该写成&
  • xml格式比较严格，特殊字符需要注意，如下：
    • & --- &
    • < --- <
    • > --- >
    • ' --- '
    • " --- "
  • 参考规定：
    • 用户名只能数字字母下划线组合
    • 密码不允许特殊字符
    • <NAME>xx</NAME><URL>xx</URL> xx必须是base64编码

• 最终在xml文件中显示的结果是

<?xml version="1.0" encoding="utf-8" ?>
<urlset>
<url><loc>url链接</loc><posttitle>js生成xml文件</posttitle><postdate>2020-07-17 10:02:46</postdate></url>
<url><loc>url链接</loc><posttitle>js生成xml文件</posttitle><postdate>2020-07-17 10:02:46</postdate></url>
</urlset>

• 在浏览器解析后显示结果为：

  
  xml在浏览器解析结果

• 参考文章
  FileSaver.js介绍
  拼接xml出现EntityRef: expecting ';'错误