vue导出自定义的html

vue导出.html文件

HTML页面由.css、htmlDom标签组成，将css设置成js通过export导出，htmlDom可以通过$el.innerHTML获得，也可通过document.getElementById('id')获得 。然后构造html页面，使用createObjectURL创建一个文件流下载。代码如下：

复制代码
import {resumecss} from '@/styles/download.css.js'
import writer from 'file-writer'
 
methods:{
    download(name){  
        let html = this.getHtml();
        let s = writer(`${name}.html`, html, 'utf-8');
    },
    getHtml(){
         const template = this.$refs.resume.innerHTML      
         let html = `<!DOCTYPE html>
                 <html>
                 <head>
                 <meta charset="utf-8">
                 <meta name="viewport" content="width=device-width,initial-scale=1.0">
                 <title>html</title>
                <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
                <style> ${resumecss} </style>
                </head>
                <body>
                <div style="margin:0 auto;width:1200px">
                ${template}
                </div>
                </body>
                </html>`
                return html
      },
}
复制代码

安装 'file-writer' 包，也可以写原生代码。如下：

复制代码
1> 安装 'file-writer' 包： npm install -D file-writer
2> 原生代码：（也可以方到  methods里面）
function writer（fileName，content，option）{
     var a = document.createElement('a');
     var url = window.URL.createObjectURL(new Blob([content],
        { type: (option.type || "text/plain") + ";charset=" + (option.encoding || 'utf-8') }));
     a.href = url;
     a.download = fileName || 'file';
     a.click();
     window.URL.revokeObjectURL(url);
 }
复制代码

download.css.js

export const resumecss = `
  html,body{
    padding: 0;
    margin: 0;
  }
  ...
`

最后直接调用哪个  download   方法就可以了，传递的就是你想给这个html取的名字

posted @   黑白棋学弟  阅读(1218)  评论(0)  编辑  收藏  举报
相关博文：
· vue 实现复制功能
· vue实现复制功能
· Vue中使用html2canvas和jspdf插件实现导出pdf(自定义html样式可带图片)并下载
· vue利用html2canvas将HTML导出为图片
· vue导出页面为PDF
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天：
2022-07-28 如何判断不同对象的类型
2022-07-28 拓展运算符是深拷贝还是浅拷贝
2022-07-28 Vue中computed用法
2022-07-28 取消文字选中（拖拽时使用）
2022-07-28 JS常用的3种弹出框
2022-07-28 iframe 标签
2022-07-28 获取某个html元素相对于视窗的位置集合
点击右上角即可分享
微信分享提示