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
- html2canvas not rendering properly (overlapping color)
- About html2canvas
- Promise Polyfill
- Download canvas to Image in IE using Javascript
- How can I get an element from within a frameset frame using JavaScript?
- Limit the size of a file upload (html input element) - Stack Overflow
- Saving text to a client-side file using vanilla JS
Updated: 2023-08-19 17:06
Created: 2022-12-14 20:00