vue中动态生成文件?

林小木
  • 420

vue中动态生成文件

最近在vue项目中需要做一个动态生成html文件的需求,基本场景就是,

1.获取详情页面数据,
2.传输到模板,获取页面html数据
3.根据获取的html数据生成一个.html文件

有没有大佬会?

回复
阅读 623
4 个回答
jinling
  • 235
✓ 已被采纳

根据 @Meathill 的方案,可以实现,我写了个DEMO

html部分

<a id="download" download>Click to Download</a>

Javascript部分

function download(evt) {
  const text = `<html><body>test download</body></html>`;

  const blob = new Blob([text], {
    type: "text/html",
  });

  const url = URL.createObjectURL(blob);
  evt.target.setAttribute('href', url);
}

document.getElementById('download').addEventListener('click', download)

网页里的 js 不能直接写本地文件,只能通过下载或者使用 File System Access API,均需要用户主动操作。

如果要求不高的话,生成 html 并触发下载也是比较简单的,不需要服务器端配合。方案大约是:

  1. 生成 html 内容
  2. 转换成 blob
  3. URL.createObjectURL() 生成内存 url
  4. 用一个 <a download> 指向上面的 url,然后触发下载
 async mounted() {
    await this.$nextTick();
    console.log(this.$el);
 }
然后用fs模块生成html文件即可啊 vue不是已经给了原生的dom元素$el了吗
宣传栏