文件下载和打印

idealcn 发布于2019-08-23 18:40 / 1630人阅读

摘要：由四个部分组成前缀指示数据类型的类型如果非文本则为可选的标记数据本身将数据转换成格式的后通过标签导出将图片下载成打印组件化后，需要通过插入样式的方法保证样式不会覆盖

文件下载 一、调用后端接口下载

通过 window.open(url) 下载;

通过 window.location = url 下载

通过 iframe 下载

</>复制代码 
    const iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    iframe.src = url;
    iframe.style.display = "none";

通过点击链接下载

</>复制代码 
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);
}

二、前端直接下载到本地

将数据转换成 Data URLs 后通过a标签导出(以)。

（Data URLs 由四个部分组成：前缀(data:)、指示数据类型的MIME类型、如果非文本则为可选的base64标记、数据本身：）

</>复制代码 
    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

将数据转换成 blob 格式的 url 后通过 a 标签导出

</>复制代码 
    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 样式的方法保证样式不会覆盖

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

云服务器 GPU云服务器 java 打印文件文件打印服务器 linux打印文件行数据 linux 打印文件行数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105655.html

云计算将怎样助力3D打印应用普及？

摘要：打印正在改变产品设计测试和制造的方式，而基于云计算的软件也正在帮助打印实现它的潜力。在云计算的帮助下，任何能连上互联网的人可以创造调整存储和流设计，并将二者发送到世界上任何地方的打印机上。　　3D打印正在改变产品设计、测试和制造的方式，而基于云计算的软件也正在帮助3D打印实现它的潜力。在云计算的帮助下，任何能连上互联网的人可以创造、调整存储和流设计，并将二者发送到世界上任何地方的3D打印机上...

diabloneo 2019-04-29 18:25 评论0 收藏0
基于云计算的软件实现3D打印的潜力

摘要：打印正在改变产品设计测试和制造的方式，而基于云计算的软件也正在帮助打印实现它的潜力。例如，一直在用基于云计算的软件来为客户定制化制造一款名为的产品。今年月，另外一家主要的打印公司宣布他们将追求一种新的基于云计算的软件策略。　　3D打印正在改变产品设计、测试和制造的方式，而基于云计算的软件也正在帮助3D打印实现它的潜力。在云计算的帮助下，任何能连上互联网的人可以创造、调整存储和流设计，并将二者...

Tychio 2019-04-29 18:25 评论0 收藏0
如何通过ip连接主机-如何利用ip地址连接打印机？

摘要：如何根据地址和子网掩码算出可以连接的主机数，是类地址，默认子网掩码为即。所以，位于子网由划分出来的第一个子网，子网号，主机地址范围，定向广播地址。如何根据IP地址和子网掩码,算出可以连接的主机数？128＜172＜191，172.16.1.12是B类地址，默认子网掩码为/16 (即255.255.0.0)。将原来的B类网络号进行子网划分后，子网掩码变为/20，即网络位(16位)向主机位(16位...

keithyau 2021-09-22 15:43 评论0 收藏0
关于python的logging库的总结

摘要：确认一切按预期运行。表明发生了一些意外，或者不久的将来会发生问题如磁盘满了。由于更严重的问题，软件已不能执行一些功能了。严重错误，表明软件已不能继续运行了。对于不能获取的名称，则记录到模块。最近在写一些python脚本，总是使用print来打印信息感觉很low，所以抽空研究了一下python的logging库，来优雅的来打印和记录日志：一、简单的将日志打印到屏幕： import l...

kaka 2019-07-30 14:48 评论0 收藏0