Vue富文本编辑器Tinymce内容导出Pdf、Word

一、Tinymce导出Pdf

使用VueHtml2pdf插件，安装插件，VueHtml2pdf详情见vue-html2pdf - npm

npm i VueHtml2pdf

引入和注册

// 引入
import VueHtml2pdf from 'vue-html2pdf'
// 注册
components: {
  VueHtml2pdf,
},

html部分

<vue-html2pdf
  :show-layout="false"
  :float-layout="true"
  :enable-download="true"
  :preview-modal="false"
  :paginate-elements-by-height="1400"
  :filename="tempFileName"
  :pdf-quality="2"
  :manual-pagination="false"
  pdf-format="a4"
  pdf-orientation="landscape"
  pdf-content-width="800px"
  @progress="onProgress($event)"
  @hasStartedGeneration="hasStartedGeneration()"
  @hasGenerated="hasGenerated($event)"
  ref="html2Pdf"
>
  <section slot="pdf-content">
    <!-- PDF Content Here -->
    <span id="report" v-html="content"></span>
  </section>
</vue-html2pdf>

<Tinymce ref="tinymce" v-model="content" :id="id" />

<!--按钮-->
<el-button type="primary" @click="handleSaveToPdf">保存为Pdf</el-button>
<el-button type="primary" @click="handleSaveToWord">保存为Word</el-button>

js

 handleSaveToPdf() {
   this.$refs.html2Pdf.generatePdf()
 }，
 onProgress() {

 },
 hasStartedGeneration() {

 },
 hasGenerated() {

 },

二、Tinymce导出Word

1. html生成doc文件

准备三个文件jquery.js，FileSaver.js，jquery.wordexport.js，前两个可以通过cdn拿到，jquery.w