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取的名字
标签：vue,option,自定义,writer,html,file,download,css From： https://www.cnblogs.com/heibaiqi/p/17587363.html