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

chujian0325

已于 2022-03-09 11:25:46 修改

阅读量9.4k

点赞数 1

分类专栏： Vue富文本编辑器Tinymce内容导出Pdf、Word 文章标签： javascript

于 2022-03-04 16:07:58 首次发布

本文链接：https://blog.csdn.net/chujian0325/article/details/123276509

版权

本文介绍了如何在Vue项目中使用Tinymce富文本编辑器导出内容为Pdf和Word文档。对于Pdf导出，借助VueHtml2pdf插件实现；Word导出则分为生成doc和docx文件，分别利用jquery.wordexport.js和html-docx.js库，详细步骤包括所需文件的引入和具体调用方法。

摘要由CSDN通过智能技术生成

一、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>

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

 },
 hasStartedGeneration() {

 },
 hasGenerated() {

 },

二、Tinymce导出Word

1. html生成doc文件

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

最低0.47元/天解锁文章