• a标签下载文件,图片,txt文件


    使用a标签下载文件的时候设置下载文件的文件名

    给a标签加一个download属性    可以设置下载下来的文件的文件名    

    注意:下载的地址域名和访问网站的域名是同源  否则设置无效

        // 下载图片
        downloadIamge(swiperItem) {//下载图片地址和图片名
          console.log('swiperItem', swiperItem)
          // let src = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png';
          let src = 'https://rds.wm-motor.cn/file-proxy/?url=' + encodeURI(swiperItem.path)
            var canvas = document.createElement('canvas');
            var img = document.createElement('img');
            img.onload = function(e) {
                canvas.width = img.width;
                canvas.height = img.height;
                var context = canvas.getContext('2d');
                context.drawImage(img, 0, 0, img.width, img.height);
                canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
                canvas.toBlob((blob)=>{
                    let link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                    link.download = swiperItem.docName; 
                    link.click();  
                }, "image/jpeg");
            }
            img.setAttribute("crossOrigin",'Anonymous');
            img.src = src;
        },
      ,

      

     // 下载文件,区分txt文件
        handleDownload(swiperItem){
        // txt文件
    if(swiperItem.docName.split(".")[1] == 'txt'){ this.urlToBlob(swiperItem).then(() => { let url = new Blob(['ufeff' + this.txtContent], {type: 'text/tet,charset=UTF-8'}); swiperItem.path = URL.createObjectURL(url); const a = document.createElement('a') a.setAttribute('download', swiperItem.docName) a.setAttribute('target', '_blank') a.setAttribute('href', swiperItem.path) a.click() }) // openDownloadDialog(blob, `${fileName}.csv`); }else {
        //其他文件 const a
    = document.createElement('a') a.setAttribute('target', '_blank') let path = 'https://rds.wm-motor.cn/file-proxy/?url=' + encodeURI(swiperItem.path) a.setAttribute('href', path) a.setAttribute('download', swiperItem.docName) a.click() } }
  • 相关阅读:
    IE9发布会,有想去的联系我,有赠票(3月21日,周一)
    HTML5时代的浏览器全面测试
    CTO门的windows 7 要不要买?是不是正版?
    约束与索引
    Linux关机命令详解
    CSS XSLT
    xml xslt中的空格输出处理
    Jmeter笔记(15)随机取 用户定义的变量
    $.getJSON不执行的原因
    更改eclipse中java和jsp文件字体的大小
  • 原文地址:https://www.cnblogs.com/sinceForever/p/14373204.html
Copyright © 2020-2023  润新知