在 VueJS 中下载实际的 HTML 页面

Question

我是 Javascript 和 VueJS 的新手。 我使用 VueJS 构建了一个项目，但该页面不与任何数据库交互。我的目标是在预览中启用编辑，完成后，当我单击“下载”按钮时，页面应将编辑内容保存为 HTML 文件。 以下是按钮的代码片段：

<v-dialog :retain-focus="false" v-model="dialogImport" max-width="600px">
  <template v-slot:activator="{ on }">
    <button id="boutonTelechargement" depressed small color="secondary" class="mr-2" @click="save()">
      <v-icon small class="mr-2">mdi-download</v-icon>Download HTML
    </button>
  </template>
</v-dialog>

我尝试了blob功能：

function save() {
  var htmlContent = ["your-content-here"];
  var bl = new Blob(htmlContent, {type: "text/html"});
  var a = document.createElement("a");
  a.href = URL.createObjectURL(bl);
  a.download = "your-download-name-here.html";
  a.hidden = true;
  document.body.appendChild(a);
  a.click();
}

“此处的内容”部分当前是静态的，这意味着它只接受我手动写入的内容。有没有一种方法可以自动填充预览中显示的所有内容？谢谢你。

Answer 1

您可以从组件中公开一个方法，该方法将返回 html 内容。然后在您的

save()

方法中使用它。

previewPanel.vue

function getHtml(){
   return this.$el.innerHTML;
}

page.vue

<preview :ref="previewPanel" />

<script setup>
let previewPanel = ref();

function save(){
  var htmlContent = previewPanel.getHtml();
  // save the html
}
</script>```