js图片及文件下载

        同源图片下载:

 <div>

        <div><img class="showImg" style="width:300px ;" src="./img/1.jpg" alt=""></div>

        <div><img class="showImg" style="width:300px ;" src="./img/2.jpg" alt=""></div>

        <button id="downloadimg">点击下载图片</button>

    </div>

js:

$("#downloadimg").on("click", function downLoad() {

        let imgList = $('.showImg');

        let dom = document.createElement("a");

        imgList.each(function (index, value) {

            let imgSrc = $(value).attr("src");

            if (imgSrc != "") {

                dom.setAttribute("href", imgSrc);

                dom.setAttribute("download", "text100000" + "img" + index);

                let clickEvent = new MouseEvent("click");

                dom.dispatchEvent(clickEvent);//触发事件

            }

        })

    })

//非同源图片下载:

// filepath: 图片链接
// filename: 需要下载的图片名称
onDownload(filepath, filename) {
      const x = new XMLHttpRequest()
      x.open('GET', filepath, true)
      x.responseType = 'blob'
      x.onload = function () {
        const blob = x.response
        const url = window.URL.createObjectURL(blob)
        // 判断是否是IE浏览器
        if (window.navigator.msSaveBlob) {
          try {
            window.navigator.msSaveBlob(blob, filename)
          } catch (e) {}
        } else {
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
        }
      }
      x.send()
    }

//文件下载为csv格式:

 var info = [

        {

            name: 'serialNumber',

            alias: '初始化序列号',

            content: 'test10000000',

            result: 'N/A'

        },

        {

            name: 'openControl',

            alias: '打开控制器',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'closeControl',

            alias: '关闭控制器',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'openLED',

            alias: '打开LED灯',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'closeLED',

            alias: '关闭LED灯',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'openCAM',

            alias: '打开相机',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'closeCAM',

            alias: '关闭相机',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'motorLocation',

            alias: '电机位0',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'motorLocation',

            alias: '电机位1000',

            content: '成功',

            result: 'PASSED'

        },

        {

            name: 'motorLocation',

            alias: '电机位900',

            content: '成功',

            result: 'PASSED'

        }

    ];

$("#makecsv").on("click", () => {

        const csv = model1CSV();

        const downloadCsv = `data: text / csv; charset = utf - 8, \ufeff${csv} `;

        console.log(downloadCsv);

        let csvName = `${info[0].content}.csv`;

        $('#makecsv_download').attr('href', downloadCsv);

        $('#makecsv_download').attr('download', csvName);//对下载文件进行命名

 

    })

 

    const model1CSV = () => {

        let index = 0;

        let csv = '序号,分组,项目,内容,检查结果\n';//csv文件第一行

        info.forEach(element => {

            index++;

            let line = `${index},${element.name},${element.alias},${element.content},${element.result}\n`;

            csv += line;

        });

        return encodeURIComponent(csv);

    }