vue中动态生成文件？

林小木

4809149417

发布于
2022-07-26

vue中动态生成文件

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

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

有没有大佬会？

前端 vue.js javascript

阅读 3.7k

4 个回答

jinling

✓ 已被采纳

根据 @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)

Meathill

22.5k133642

发布于
2022-07-26

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

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

生成 html 内容
转换成 blob
URL.createObjectURL() 生成内存 url
用一个 <a download> 指向上面的 url，然后触发下载

yzllee

LinuftRm

 async mounted() {
    await this.$nextTick();
    console.log(this.$el);
 }
然后用fs模块生成html文件即可啊 vue不是已经给了原生的dom元素$el了吗

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

vue中动态生成文件？

vue中动态生成文件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？