富文本编辑器导出内容为pdf或docx

富文本内容导出为 pdf

安装依赖

npm install vue-html2pdf --save

使用说明

//引入组件
import VueHtml2pdf from "vue-html2pdf";

//使用组件
<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>

// 导出
// tempFileName 导出的文件名
handleSaveToPdf() {
    
      this.$refs.html2Pdf.generatePdf();
    }

富文本内容导出为 word

安装依赖

npm install file-saver --save
npm install html-docx-js --save

使用说明

//引入
import {
    saveAs} from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';

handleSaveToWord() {
    
    // this.content 富文本内容
    // this.tempFileName 导出的文件名
      var converted = htmlDocx.asBlob(this.content);
      saveAs(converted, this.tempFileName);
    },