通过DataUrl或BlobUrl可以实现图片、文本文件、html不预览直接下载

最新推荐文章于 2024-07-31 15:45:12 发布

瑆箫

最新推荐文章于 2024-07-31 15:45:12 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/mo3408/article/details/90515277

版权

web 专栏收录该内容

205 篇文章 8 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了通过DataUrl和BlobUrl实现图片、文本文件、HTML的下载方法。DataUrl适合图片下载，BlobUrl适合.txt、.json等文本文件下载。尽管存在兼容性问题，但针对特殊文件类型，如通过CDN获取的url，这种方式很实用。建议在遇到CORS等问题时，可由后端处理转换，提供直接下载的url。

摘要由CSDN通过智能技术生成

1.Dataurl方式：

 // ./util.js
 // 图片转base64
 function image2base64(img) {  
  const canvas = document.createElement("canvas");  
  canvas.width = img.width;  
  canvas.height = img.height;  
  const ctx = canvas.getContext("2d");  
  ctx.drawImage(img, 0, 0, img.width, img.height);  
  const mime = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
  const dataUrl = canvas.toDataURL("image/" + mime);  
  return dataUrl;
 }
 // html页面，将a标签href属性动态赋值为dataUrl
 <a id='downloadDataUrl' class="button is-dark">下载data:Url图片</a>
 ...
 <script>
  const image = new Image();
  image.setAttribute("crossOr