<strike id="ge0ic"></strike>

<strike id="ge0ic"></strike>

<strike id="ge0ic"></strike>

<strike id="ge0ic"><input id="ge0ic"></input></strike><del id="ge0ic"></del>

<fieldset id="ge0ic"></fieldset>

文件下載和打印

idealcn 發(fā)布于2019-08-23 18:40 / 1548人閱讀

摘要：由四個(gè)部分組成前綴指示數(shù)據(jù)類型的類型如果非文本則為可選的標(biāo)記數(shù)據(jù)本身將數(shù)據(jù)轉(zhuǎn)換成格式的后通過標(biāo)簽導(dǎo)出將圖片下載成打印組件化后，需要通過插入樣式的方法保證樣式不會(huì)覆蓋

文件下載 一、調(diào)用后端接口下載

通過 window.open(url) 下載;

通過 window.location = url 下載

通過 iframe 下載

    const iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    iframe.src = url;
    iframe.style.display = "none";

通過點(diǎn)擊鏈接下載

function download(fileName, url) {

    if (!fileName) return;

    console.log(url);
    const link = document.createElement("a");
    const evt = document.createEvent("MouseEvents");

    link.href = url;
    link.setAttribute("download", fileName);

    evt.initEvent("click");

    link.dispatchEvent(evt);
}

二、前端直接下載到本地

將數(shù)據(jù)轉(zhuǎn)換成 Data URLs 后通過a標(biāo)簽導(dǎo)出(以)。

（Data URLs 由四個(gè)部分組成：前綴(data:)、指示數(shù)據(jù)類型的MIME類型、如果非文本則為可選的base64標(biāo)記、數(shù)據(jù)本身：）

    data:[][;base64],

    const data = resolveDate(this.data, this.headersMapping);
    download("test.csv", `data:"attachment/csv",ufeff${encodeURIComponent(data)}`);
    // data:"attachment/csv",?%E5%A7%93%E5%90%8D%2C%E5%B9%B4%E9%BE%84%2C%E7%94%B5%E8%AF%9D%0D%0A%E5%BC%A0%E4%B8%89%2C21%2C13122223839%0D%0A%E6%9D%8E%E5%9B%9B%2C13%2C13198739339%0D%0A%E7%8E%8B%E4%BA%94%2C23%2C13198340239%0D%0A%E6%9D%8E%E9%9B%B7%2C42%2C13198783839%0D%0A%E5%BC%A0%E6%A2%85%E6%A2%85%2C5%2C13198783839%0D%0A%E5%B0%8F%E6%98%8E%2C22%2C13139083839%0D%0A%E5%B0%8F%E7%BA%A2%2C13%2C13198783839%0D%0A%E5%B0%8F%E7%BB%BF%2C11%2C13198783839

將數(shù)據(jù)轉(zhuǎn)換成 blob 格式的 url 后通過 a 標(biāo)簽導(dǎo)出

    const data = resolveDate(this.data, this.headersMapping);
    const url = window.URL.createObjectURL(new window.Blob([`ufeff${data}`]));
    // blob:http://localhost:8081/9b0d2867-ada2-4db1-b090-d0e8d44e0ae0
    downloadFile("test.csv", url);

將 canvas 圖片下載成 png

    const imageData = this.canvas.toDataURL();
    // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAANmklEQVR4Xu2dB6w9RRXGP4zBBhor9hoQCwh2I3axiwV7FzH2XgB7QQQbViwk2BWDDey9VxALVoxEgwr2QgKKGs2P/2zcXO67d3dnz5nZveckN+8ld+bMzLff3Z09bbZTSCBggMB2BjpDZSCgIFaQwASBIJ...QkTBIJYJrCG0iBWcMAEgSCWCayhNIgVHDBBIIhlAmsoDWIFB0wQCGKZwBpKg1jBARMEglgmsIbSIFZwwASBIJYJrKE0iBUcMEEgiGUCaygNYgUHTBAIYpnAGkqDWMEBEwSCWCawhtIgVnDABIEglgmsoTSIFRwwQSCIZQJrKA1iBQdMEAhimcAaSv8H1TBWtQk/HwUAAAAASUVORK5CYII=
    downloadFile("test.jpg", imageData);

    const imageData = this.canvas.toDataURL().replace("image/png","image/octet-stream");
    // data:image/octetstream;base64,JrKE0iBUcM...ygNYgUHTBnDABIEd3dnz5nZveckN+8ld+bMzLff3Z09bbZTSCBggMB2BjpDZSCgIFaQwASBIJ...QkTBIJYJrCG0iBWcMAEgSCWCayhNIgVHDBBIIhlAmsoDWIFB0wQCGKZwBpKg1jBARMEglgmsIbSIFZwwASBIJYJrKE0iBUcMEEgiGUCaygNYgUHTBAIYpnAGkqDWMEBEwSCWCawhtIgVnDABIEglgmsoTSIFRwwQSCIZQJrKA1iBQglgmsoTSIFRwwQSCIZQJmcAaSv8H1TBWtQk/HwUAAAAASUVORK5CYII=
    downloadFile("test2.png",  imageData);

打印

...

.print {
    page-break-after: always;
}
@page {
    margin: 0;
}

組件化后，需要通過插入 page 樣式的方法保證樣式不會(huì)覆蓋

    const el = document.createElement("style");
    el.type = "text/css";
    el.appendChild(document.createTextNode("@page { margin: 0mm; size: 80mm 160mm; }"));
    document.head.appendChild(el);