html+js将文本和图片保存（下载）到本地技术

我在博文https://blog.csdn.net/cnds123/article/details/120469779介绍了用html+js读取本地文本文件及图片文件的一些例子。

下面介绍html+js将文本和图片保存（下载）到本地技术，先介绍html+js将文本内容保存到本地文件，再介绍html+js将图片内容保存到本地文件。

一、html+js将文本内容保存到本地文件

网页保存文本的例子，源码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>将文本内容保存到本地文件</title>
<script >
function download(){ 
    var text = document.getElementById("my-textarea").value; //要保存的内容
    if(text==""){
        alert("没有内容可保存！");
        return;
    }
    var blob = new Blob([text], { type: "text/plain"}); 
    var anchor = document.createElement("a"); 
    anchor.download = "my-filename.txt"; 
    anchor.href = window.URL.createObjectURL(blob); 
    anchor.target ="_blank"; 
    anchor.style.display = "none"; // just to be safe! 
    document.body.appendChild(anchor); 
    anchor.click(); 
    document.body.removeChild(anchor); 
} 
</script>
</head>
<body>
<textarea id="my-textarea" rows="15" cols="60"></textarea> 
<br>
<button type="button" onclick="download()">Save</button>
</body>
</html>

运行效果如下：

下载到哪了？浏览器默认下载位置（路径）：

C:\Users\[你的姓名]\Downloads

在地址栏中或者显示为：（C:)>用户>[你的姓名]>下载

【注：地址栏是用来显示路径的，还可以用此快速更改路径——输入路径回车】

上面的源码，也可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>将文本内容保存到本地文件</title>
        <script>
           function download() {   
              // 要保存的文本
              //var stringData = '一段文本abc.'
              var stringData =document.getElementById("my-textarea").value;
              if(stringData==""){
                  alert("没有内容可保存！");
                  return;
              }
              // dada 表示要转换的字符串数据，type 表示要转换的数据格式
              const blob = new Blob([stringData], {
               type: "text/plain;charset=utf-8"
              })
              // 根据 blob生成 url链接
              const objectURL = URL.createObjectURL(blob)

              // 创建一个 a 标签Tag
              const aTag = document.createElement('a')
              // 设置文件的下载地址
              aTag.href = objectURL
              // 设置保存后的文件名称
              aTag.download = "my-filename.txt"
              // 给 a 标签添加点击事件
              aTag.click()
              // 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。
              //URL.revokeObjectURL(objectURL)            
           }

        </script>
    </head>
    <body>
        <textarea id="my-textarea" cols="60" rows="15" ></textarea>
        <br>
        <button type="button"  onclick="download()" >Save</button>
    </body>
</html>

效果图和前面的一样，就不给出图示了。

下面是网页读入和保存文本的例子，源码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>在本地读入和保存文本</title>
</head>
<body>
<script>
var ff 
function show()
{
    var reader = new FileReader();
    reader.onload = function() 
    {
        //alert(this.result)
        story.value=this.result        
    }
    var f = document.getElementById("filePicker").files[0];   
    ff=f.name;
    //alert(f.name)
    reader.readAsText(f);
}

function download(){ 
    var text = document.getElementById("story").value; 
    var blob = new Blob([text], { type: "text/plain"}); 
    var anchor = document.createElement("a"); 
    //anchor.download = "my-filename.txt"; 
    anchor.download = ff;
    anchor.href = window.URL.createObjectURL(blob); 
    anchor.target ="_blank"; 
    anchor.style.display = "none"; // just to be safe! 
    document.body.appendChild(anchor); 
    anchor.click(); 
    document.body.removeChild(anchor); 
}
</script>
 
<input type="file" name="file" id="filePicker" onchange="show()"  />
<br>
 
<textarea id="story" name="story" rows="15" cols="60">
</textarea>
<br>
<button type="button" onclick="download()">downloadSave</button> 
</body>
</html>

运行效果如下：

下载到哪了？浏览器默认下载位置。

二、html+js将图片内容保存到本地文件

下面是网页读入和保存图片的例子，源码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>选图显示</title>
</head>
<body>
  <!-- 选择图片显示<input type="file"  accept=".png, .jpg, .jpeg,.gif" onchange="showPreview(this, 'portrait')" />  -->
  选择图片显示<input type="file"  accept="image/*" onchange="showPreview(this, 'portrait')" /> 
  <button onclick="downloadIamge('portrait','pictureName')">保存图片</button>
  <br>
  <img src="" id="portrait">
  <br>
  <script> 
    var ReadFlag;
    function showPreview(source, imgId) {
        var file = source.files[0];
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {               
                document.getElementById(imgId).src = e.target.result;
                ReadFlag = e.target.result;
            }
            fr.readAsDataURL(file);
        }
    }

    //将img标签中图片保存到本地，img_id图片标签的id，name是下载图片名称'
    function downloadIamge(img_id,name) {
        //alert(ReadFlag);
        if(ReadFlag == undefined){
            alert("请先选择图片文件！");
            return;
        }

        // 通过选择器获取img元素
        var img = document.getElementById(img_id)
        // 将图片的src属性作为URL地址        
        var url = img.src
        var a = document.createElement('a')
        var event = new MouseEvent('click')
        a.download = name // '下载图片名称'
        a.href = url
        a.dispatchEvent(event) //
    }

  </script>
</body>
</html>

保存文件名为：选择图片显示再下载到本地.html，用浏览器打开效果：

下载到哪了？浏览器默认下载位置。

OK！ 

# javascript # html # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区