html内容导出word和pdf（带图片）

最新推荐文章于 2024-09-29 12:35:31 发布

周星星日记

最新推荐文章于 2024-09-29 12:35:31 发布

阅读量1.8k

点赞数 5

分类专栏： vue记录文章标签： html word javascript

本文链接：https://blog.csdn.net/sky___Show/article/details/127426874

版权

vue记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在前端实现富文本内容的导出，包括不带图片的Word导出和带有图片的Word导出，以及富文本内容的PDF导出。通过使用html-docx-js和vue-html2pdf库，可以将富文本转换为Word和PDF格式，对于图片处理，采用了base64编码的方式。

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

富文本内容导出为 word

安装依赖

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

引入依赖

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

情况一，内容不带图片直接导出

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

情况二，内容带图片，需要将图片转换为base64格式才可以导出

	formToWord() {
	      if (!this.value.trim()) {
	        this.$message.error('内容不能为空')
	        return
	      }
	      this.convertImagesToBase64()
	      var contentDocument = this.$refs.weditor.editor.$textElem.elems[0];
	      var content = '<!DOCTYPE html>' + contentDocument.outerHTML;
	      let converted = htmlDocx.asBlob(content)
	      saveAs(converted, this.tempFileName);
	 },
	convertImagesToBase64() {
	 //获取富文本框中的所有图片	
      let contentDocument = this.$refs.weditor.editor.$textElem.elems[0];
      var regularImages = contentDocument.querySelectorAll("img");
      for (var i = 0; i < regularImages.length; i++) {
        var imgURL = regularImages[i].currentSrc;
        this.getBase64(imgURL, regularImages[i]);
      }
    },
	getBase64(url, charImg) {
      var Img = new Image();
      Img.crossOrigin = "Anonymous";//跨域必须使用，且后台也得设置允许跨域
      let dataURL = '';
      Img.src = url;
      Img.onload = () => { //要先确保图片完整获取到，这是个异步事件
        var canvas = document.createElement("canvas"), //创建canvas元素
            width = Img.width, //确保canvas的尺寸和图片一样
            height = Img.height;
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
        dataURL = canvas.toDataURL('image/jpg'); //转换图片为dataURL
        this.condataurl(dataURL, charImg) //调用回调函数
      };
    },
    condataurl(dataURL, charImg) {
      charImg.src = dataURL;
      //console.log(charImg);
    },

富文本导出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="a3"
        pdf-orientation="landscape"
        pdf-content-width="98%"
        ref="html2Pdf"
    >
      <section slot="pdf-content">
        <!-- PDF 内容 -->
        <span id="report" v-html="value"></span>
      </section>
    </vue-html2pdf>

   // 调用方法
  formToPDF() {
    if (!this.value.trim()) {
       this.$message.error('内容不能为空')
     }
     this.$refs.html2Pdf.generatePdf();
  }