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

富文本内容导出为 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'); //转换图片为dataURLthis.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();}

html内容导出word和pdf（带图片）相关推荐

java-制作flt模板，导出word文档带图片循环
java-制作flt模板,导出word文档带图片循环模板制作制作xml 编辑xml文档将xml模板转换为flt 编写工具类导出word工具类获取远程图片使用示例使用示例--springb ...
使用freemarker导出word、pdf、图片
安装openoffic启动服务请参考: java 调用OpenOffice将word格式文件转换为pdf格式 - warrior1234 - 博客园 maven包: <!-- https://m ...
java通过freemarker导出word文档带图片并且循环
转载请标明出处: https://blog.csdn.net/weixin_41965979/article/details/80969287 本文出自付付讶的博客 1:所需jar包:freemark ...
Java通过IText导出word和pdf
最近做的项目中需要用到导出word和pdf的功能(还有图表),在网上找了很多资料,最后敲定用了IText组件,下面是我项目中的一个Demo,记录了一下,希望对需要的人有帮助. 相关jar包下载地址:h ...
Magicodes.IE已支持导出Word、Pdf和Html
关于Magicodes.IE 导入导出通用库,通过导入导出DTO模型来控制导入和导出,支持Excel.Word.Pdf和Html. GitHub地址:https://github.com/xin-la ...
aspose实现word转pdf带书签
aspose实现word转pdf带书签直接上代码 public static void word2Pdf(String inputUrl, String outUrl) {try {Document ...
java aspose 导出word_aspose.words导出html 转word文档带图片,(无网络也可以看图)
aspose-words-14.9.0-jdk16.jar public static void exportWordImpl(Map> ml,OutputStream out){ java.u ...
使用FreeMarker生成word文档(带图片)，word转pdf，预览pdf，pdf下载工具类
一.下载或配置: 下载jar包 :freemaker的jar包下载下载jar包 :aspose-words的jar包下载或者配置maven依赖: pom.xml添加aspose的依赖包(maven ...
实现html和word的相互转换（带图片）
项目后端使用了springboot,maven,前端使用了ckeditor富文本编辑器.目前从html转换的word为doc格式,而图片处理支持的是docx格式,所以需要手动把doc另存为docx,然 ...

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

富文本内容导出为 word

富文本导出PDF

html内容导出word和pdf（带图片）相关推荐

最新文章

热门文章