vue2 md文件预览和下载

javascript 复制代码

本文展示预览md文件，以及将md内容下载成md和pdf文件的方法
1、使用vue-meditor插件
2、使用@kangc/v-md-editor插件

3、md内容下载成md文件
4、md内容下载成pdf文件

复制代码

注意：markdown-it、vue-markdown、marked插件也试了，效果不好，不推荐

（1）vue-meditor

步骤1：下载依赖

复制代码

npm i vue-meditor -S

步骤2：使用

javascript 复制代码

<!--    md编辑器,需要-->
    <MarkdownPro :initialValue="markdownContent" :isPreview="false"/>
<!--    md预览-->
    <MarkdownPreview :initialValue="markdownContent"></MarkdownPreview>

javascript 复制代码

<script>
import Markdown from 'vue-meditor';
import { MarkdownPro } from 'vue-meditor'
import { MarkdownPreview } from 'vue-meditor'

export default {
  data() {
    return {
      markdownContent: '',
    };
  },
  components: {
    Markdown,
    MarkdownPro,
    MarkdownPreview
  },
  mounted() {
    this.loadMarkdownFile();
  },
  methods: {
    async loadMarkdownFile() {
      try {
        //引入在public文件夹下的md文件
        const response = await fetch('/api.md');
        const markdownText = await response.text();
        this.markdownContent = markdownText;
      } catch (error) {
        console.error('Failed to load the Markdown file:', error);
      }
    },
  }
};
</script>

（2）方法二：@kangc/v-md-editor

步骤1：下载依赖

复制代码

1、npm i @kangc/v-md-editor -S
2、npm install --save highlight.js

步骤2：使用

javascript 复制代码

 <VMdPreview :text="markdownContent"></VMdPreview>
<script>
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

const markdownContent = ref('# Hello md-e 👋\n\n- 支持实时预览\n- 支持图片上传\n- 支持快捷键（如 Ctrl+S 保存）')
const loadMarkdownFile = async () =>{
  try {
    //引入在public文件夹下的md文件
    const response = await fetch('/api.md');
    const markdownText = await response.text();
    markdownContent.value = markdownText;
  } catch (error) {
    console.error('Failed to load the Markdown file:', error);
  }
}

loadMarkdownFile()
</script>

（3）下载md文件

方法1：

javascript 复制代码

// * 保存.md文件 
const onSaveMD = () => {
  const blob = new Blob([markdownContent.value], { type: 'text/markdown' });

  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `1.md`;

  link.click();

  URL.revokeObjectURL(link.href);
};

方法2：

javascript 复制代码

import download from "downloadjs" //（只能下载源文件，不能下载需要转格式的）
const onSaveMD = () => {
  download(this.markdownContent, 'test12.md', "text/markdown");
};

（4）md内容下载成pdf文件

javascript 复制代码

<VMdPreview :text="markdownContent"  id="content-to-pdf"></VMdPreview>
<script setup>
import html2pdf from 'html2pdf.js';
// * 保存.pdf文件
const onSavePDF = () => {
  // 获取要转换的元素或创建临时元素
  const element = document.getElementById('content-to-pdf');

  const options = {
    margin: 10,
    filename: 'document.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2 },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  };
  html2pdf().from(element).set(options).save();
    // html2pdf().from(tableElement).save()
};

</script>