js_util

1、js导出文件

		//vue下载file-saver
		import * as FileSaver from 'file-saver';
		FileSaver.saveAs(
          new Blob([JSON.stringify(exportComponent)], {
            type: 'text/plain;charset=utf-8',
          }),
          `${this.rightClickComponent.name + Date.now()}.json`
        );
		//js
		function saveJSON(data, filename){
	      if(!data) {
	        alert('保存的数据为空');
	        return;
	      }
	      if(!filename) 
	        filename = 'json.json'
	      if(typeof data === 'object'){
	        data = JSON.stringify(data, undefined, 4)
	      }
	      var blob = new Blob([data], {type: 'text/json'}),
	      e = document.createEvent('MouseEvents'),
	      a = document.createElement('a')
	      a.download = filename
	      a.href = window.URL.createObjectURL(blob)
	      a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
	      e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
	      a.dispatchEvent(e)
	    }
	    saveJSON('1234',"obj.json")

2、js导入json文件

			<input type="file" @change="changeFile($event)">
			changeFile(e) {
			      let that = this;
			      var reader = new FileReader();//新建一个FileReader
			      reader.readAsText(e.target.files[0], "UTF-8");//读取文件 
			      reader.onload = async function(evt){ //读取完文件之后会回来这里
			            var fileString = evt.target.result; // 读取文件内容
			            let importCompont = JSON.parse(fileString)
			      }
			    },

3、全屏和退出全屏

全屏

const fullScreen = () => {
  const element = document.getElementsByClassName(className)[0];
  if (element.requestFullscreen) {
    element.requestFullscreen();
  }
};

退出全屏

const onFullScreenExit = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
};

监听变化

onMounted(async () => {
  window.onresize = () => {
    if (document.fullscreenElement) {
      isFullScreen.value = true;
    } else {
      isFullScreen.value = false;
    }
  };
});

4、复制图片到剪切板

let canvas = document.getElementsByTagName('canvas')[0];
canvas.toBlob(async (blob: any) => {
  const data = [
    new (window as any).ClipboardItem({
      [blob.type]: blob,
    }),
  ];
  await (navigator.clipboard as any).write(data).then(
    () => {
      menuDom.style.display = 'none';
      proxy.$message.success('复制成功！');
    },
    () => {
      proxy.$message.error('复制失败！');
    },
  );
});