HA

JS库使用问题汇总

html2canvas

使html2canvas 在ie11中工作

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

html2canvas 在ie11中渲染出不明色块

html2canvas(document.querySelector('#preview_modal'), {
    allowTaint: false,
    useCORS: true,
    scale: 2,
})

使用 html2canvas 生成图片在新tab打开

var image = new Image();
image.src = canvas.toDataURL();

var wImage = window.open("");
setTimeout(() => wImage.document.title = "name",0);
wImage.document.write(image.outerHTML);

使用 html2canvas 生成图片并下载

var link = document.createElement('a');
link.download = 'filename.png';
link.href = canvas.toDataURL()
link.click();

// 适配IE11
html2canvas(document.querySelector("#outImage"), { scale: 2 }).then(function (canvas) {
    if (canvas.msToBlob) { // IE
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob, 'name.png');
    } else { // CH, FF
        var link = document.createElement('a');
        link.download = 'name.png';
        link.href = canvas.toDataURL()
        link.click();
    }
});

获取frame内的元素

window.frames[1].document.getElementById('someElementId');

限制上传文件大小

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    // 1MB = 1048576 1KB=1024
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

使用js写入文件并下载

const downloadToFile = (content, filename, contentType) => {
  const a = document.createElement('a');
  const file = new Blob([content], { type: contentType });

  a.href = URL.createObjectURL(file);
  a.download = filename;
  a.click();

  URL.revokeObjectURL(a.href);
};

document.querySelector('#btnSave').addEventListener('click', () => {
  const textArea = document.querySelector('textarea');

  downloadToFile(textArea.value, 'my-new-file.txt', 'text/plain');
});

reference