admin管理员组

文章数量:1592435

一、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  v-html="content"></span>
  </section>
</vue-html2pdf>

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

<!--按钮-->
<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

本文标签： 编辑器文本内容vueword

版权声明：本文标题：Vue富文本编辑器Tinymce内容导出Pdf、Word 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728138850a1147095.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。