如何在网页中实现下载图片或下载文件

点击按钮下载文件

• 已知文件的地址
  • 图片地址必须与当前网页是同源
    • 同源：协议、域名、端口相同
  • download可以指定下载后的文件名
  • 如果链接点击后，服务器的 HTTP 回应的头信息设置了Content-Disposition字段，并且该字段的值与download属性不一致，那么该字段优先，下载时将显示其设置的文件名

  <div>
    <img src="/assets/1.png" alt="">
    <a
      href="./assets/1.png"
      download="2.png"
      >点击下载</a
    >
  </div>

• 未知文件的地址，但是可以获取到文件blob

<button @click="onClickLoad">点击下载</button>
<script>
const onClickLoad = () => {
  // 模拟请求后端获取文件的blob
  fetch("./assets/1.png")
    .then((res) => res.blob())
    .then((res) => {
      // 将blob转换为临时链接
      const url = URL.createObjectURL(res)  //创建URL,
      const aLink  = document.createElement("a");
      aLink.setAttribute("href",url)
      aLink.download = Date.now()+".png"
      aLink.click()
    });
};
</script>

将html生成图片

• 通过使用html2canvas将一段html转化为canvas

<template>
  <div class="box" ref="boxRef">
    <img src="./assets/1.png" alt="" class="img">
  </div>
  <button @click="onCreateImgHandle">生成图片</button>
  <div class="box1" ref="boxRef1"></div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import html2canvas from "html2canvas"
const boxRef = ref(null)
const boxRef1= ref(null)
const onCreateImgHandle = ()=>{
  html2canvas(boxRef.value).then(res=>{
    boxRef1.value.appendChild(res)
  })
}
</script>

<style lang="less" scoped>
.box{
  width: 300px;
  height: 300px;
  background: mediumaquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
  .img{
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>

• 将canvas转换为img

<template>
  <div class="box" ref="boxRef">
    <img src="./assets/1.png" alt="" class="img" />
  </div>
  <button @click="onCreateImgHandle">生成图片</button>
  <div>
    <img src="" alt="" ref="imgRef" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import html2canvas from "html2canvas";
const boxRef = ref(null);
const imgRef = ref(null);
const onCreateImgHandle = () => {
  html2canvas(boxRef.value).then((res) => {
    // 将canvas转化为base64编码的格式，在img标签中显示
    imgRef.value.src = res.toDataURL();
  });
};
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  background: mediumaquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
  .img {
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>

• 通过file-saver插件将blob保存为文件

<template>
  <div class="box" ref="boxRef">
    <img src="./assets/1.png" alt="" class="img" />
    <div class="box_text" ref="boxText" :style="{ fontSize: '16px' }">
      {{
        handleShowIssue(
          "大家哦怕建瓯大家几哦啊加哦评价案件欧锦飒飒怕怕击破大将军庞大"
        )
      }}
    </div>
  </div>
  <button @click="onCreateImgHandle">生成图片</button>
  <div>
    <img src="" alt="" ref="imgRef" />
  </div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import html2canvas from "html2canvas";
import { saveAs } from "file-saver";
const boxRef = ref(null);
const imgRef = ref(null);
const boxText = ref(null);

// 处理html2canvas文案超出时不能显示省略号问题
const handleShowIssue = (text) => {
  if (boxText.value) {
    const fontSize = parseFloat(boxText.value.style.fontSize);
    const offsetWidth = boxText.value.offsetWidth;
    const num = Math.floor(offsetWidth / fontSize);
    return text.substring(0, num-1)+"...";
  }
};

const onCreateImgHandle = () => {
  html2canvas(boxRef.value).then((res) => {
    // 将canvas转化为base64编码的格式，在img标签中显示
    imgRef.value.src = res.toDataURL();
    // 将canvas转换为blob，通过file-saver将canvas保存为一个图片
    res.toBlob((blob) => {
      saveAs(blob, Date.now() + ".png");
    });
  });
};
</script>

<style lang="less" scoped>
.box {
  width: 300px;
  height: 300px;
  background: mediumaquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .img {
    width: 100px;
    height: 100px;
    display: block;
  }
  .box_text {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
  }
}
</style>

html2canvas常见问题

html2canvas常见问题

file-saver使用方式

file-saver使用方式