前端常见需求整理 - 全局相关（修改页面标题、复制文本、点击下载图片）

本文链接：https://blog.csdn.net/qq_61270298/article/details/129807234

H5修改页面标题

// 修改页面标题
export const changeDocumentTitle = (name: string) => {
  // 设置初始化的时候页面的标题,兼容 ios 的情况
  let i = document.createElement("iframe");
  i.src = "https://xxx.com/favicon.ico";
  i.style.display = "none";
  i.onload = function () {
    setTimeout(function () {
      i.remove();
    }, 9);
  };
  document.title = name;
  document.body.appendChild(i);
};

需要获取一个较小的资源来辅助实现。

其它实现

export const setDocumentTitle = function (title) {
  document.title = title
  const ua = navigator.userAgent
  // eslint-disable-next-line
  const regex = /\bMicroMessenger\/([\d\.]+)/
  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
    const i = document.createElement('iframe')
    i.src = '/favicon.ico'
    i.style.display = 'none'
    i.onload = function () {
      setTimeout(function () {
        i.remove()
      }, 9)
    }
    document.body.appendChild(i)
  }
}

复制文本

function copy(text) {
  const url = text;
  // 新建一个文本框
  const oInput = document.createElement('input');
  // 赋值给文本框
  oInput.value = url;
  document.body.appendChild(oInput);
  // 选择对象;
  oInput.select();
  // 执行浏览器复制命令
  document.execCommand('Copy');
  // 复制完成删除掉输入框
  document.body.removeChild(oInput);
  // 复制成功提醒
},

web点击下载图片

点击链接元素下载图片

<a-button type="primary">
  <a download="qrcode.png" @click='download' id="download">下载</a>
</a-button>

<script>
const download = function () {
  let canvas = document.getElementsByTagName('canvas')[0]
  document.getElementById('download').setAttribute('href', canvas.toDataURL())
}
</script>

点击非链接元素下载图片

handleOks() {
  let src = this.$refs["qrcodeImage"].dataUrl;
  let a = document.createElement("a");
  a.href = src;
  a.download = "qrcode.png";
  a.click();
}