vue导出文件,用FileSaverJs就够了

这篇具有很好参考价值的文章主要介绍了vue导出文件,用FileSaverJs就够了。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

FileSaver.js 是在客户端保存文件的解决方案,非常适合 在客户端上生成文件的 Web 应用。它是 HTML5 版本的 saveAs() FileSaver 实现,支持大多数主流的浏览器,其兼容性如下图所示:**

vue导出文件,用FileSaverJs就够了,vue.js,javascript,前端

从文件保护程序导入saveAs()

import { saveAs } from 'file-saver';

使用 保存文本require()

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {
   type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保存文本

 var blob = new Blob(["Hello, world!"], {
   type: "text/plain;charset=utf-8"});
 FileSaver.saveAs(blob, "hello world.txt");

保存网址

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

在同一源中使用 URL 将只使用 . 否则,它将首先检查它是否支持具有同步头请求的 cors 标头。 如果是这样,它将下载数据并使用 Blob URL 保存。 如果没有,它将尝试使用 .a[download]``a[download]标准 W3C 文件 API Blob 接口并非在所有浏览器中都可用。Blob.js 是解决此问题的跨浏览器实现。文章来源地址https://www.toymoban.com/news/detail-600056.html

保存画布

var canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {
   
    saveAs(blob, "pretty image.png");
});<

到了这里,关于vue导出文件,用FileSaverJs就够了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JavaScript和XLSX.js将数据导出为Excel文件

    导出数据是Web应用程序中常见的功能之一。在许多情况下,我们需要将数据导出为Excel文件,以便用户可以在本地计算机上查看和编辑数据。在本篇博客中,我们将介绍如何使用JavaScript和XLSX.js将数据导出为Excel文件。 XLSX.js是一个JavaScript库,它提供了一组API,可以将数据转换

    2024年04月26日
    浏览(42)
  • 前端JS实现导出xlsx文件

    需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。 使用的插件: js-export-excel 安装: npm install js-export-excel 使用: 亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端

    2024年02月04日
    浏览(59)
  • JavaScript的选择结构你真的了解吗?(看完这一篇就够了)

    ​🌈个人主页:前端青山 🔥系列专栏:JavaScript篇 🔖 人终将被年少不可得之物困其一生 依旧 青山 ,本期给大家带来JavaScript篇专栏内容:JavaScript-选择结构 目录 选择结构 实现选择结构的语句 三元(目)运算符 案例 判断一个年份是闰年还是平年 判断一个数是偶数还是奇数

    2024年02月04日
    浏览(38)
  • 前端导出文件 | fileSaver.js源码阅读

    了解fileSaver.js核心实现 自己动手实现简易导出功能 在Vue中如何使用文件 1、fileSave.js库地址:https://github.com/eligrey/FileSaver.js 2、src目录结构 3、在浏览器打开test.html,点击下载按钮,进行代码调试 进入saveAs函数后可按下一步进行调试,查看代码执行过程。 fileSaver.js核心代码实

    2024年02月05日
    浏览(50)
  • 纯前端导出,设置导出xlsx文件样式xlsx-js-style

    设置导出的表格样式,xlsx-js-style!真的绝绝子! 1.下载xlsx-js-style依赖 2.在main.js中挂载到vue原型上,方便使用  3.页面具体写法 参考:前端根据后端返回数据导出指定样式的表格(xlsx-js-style)_前端excel导出指定格式-CSDN博客

    2024年01月17日
    浏览(42)
  • Vue中前端导出word文件

    很多时候在工作中会碰到完全由前端导出word文件的需求,因此特地记录一下比较常用的几种方式。 一、提供一个word模板 该方法提供一个word模板文件,数据通过参数替换的方式传入word文件中,灵活性较差,适用于简单的文件导出。需要依赖: docxtemplater、file-saver、jszip-uti

    2024年02月05日
    浏览(43)
  • Vue前端表格导出Excel文件

    分享一个Vue前端导出Excel文件的方法。记录学习! 功能需求 :将表格的全部数据导出Excel格式的文件 前端 :Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表格数据到前端即可(基础的多表查询,用的内连接) 2.1 核心方法 将这个导出方法单独封装出来,带一

    2023年04月24日
    浏览(91)
  • 记录--Vue中前端导出word文件

    很多时候在工作中会碰到完全由前端导出word文件的需求,因此特地记录一下比较常用的几种方式。 该方法提供一个word模板文件,数据通过参数替换的方式传入word文件中,灵活性较差,适用于简单的文件导出。需要依赖: docxtemplater、file-saver、jszip-utils、pizzip 。   调用down

    2024年02月08日
    浏览(35)
  • 前端结合xlsx.js+xlsx-style.js源码实现自定义excel文件导出

          js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。 创建一个excel会经历以下过程: 创建一个工作薄 创建一个sheet 创建表格行列等

    2024年03月10日
    浏览(73)
  • Vue图片处理解决方案,一篇就够了

    一、阅读须知 小帅爆肝整理的这篇文章,内容比较多,帅帅的你值得看一看,有解决方案的核心代码,放到项目中可以直接使用 最近还会更新关于“图片横向合并、纵向合并、图片编辑”的另一篇文章,敬请期待! 二、解决的问题 使用 canvas 处理图片旋转、导入问题 目前来

    2024年02月06日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包