缺点：因为采用的事网页截图再保存到pdf的形式，所以导出的pdf只能看 不能复制 编辑！！！
优化请看另外一种：网页导出pdf 需要可以复制编辑的pdf文件 采用print.js导出pdf
Vue使用printJS导出网页为pdf、printJS导出pdf、空白页解决、自定义页脚_params.printable.charat is not a function-CSDN博客
解决导出视频 截取视频第一帧为图片 再导出到pdf上
html
<div
class="base-video-source clearfloat"
style="text-align: center"
>
<!-- <video
v-if="eviDocContent.evidenceVideoSrc != ''"
:src="eviDocContent.evidenceVideoSrc"
controls="controls"
>
您的浏览器不支持视频播放
</video> -->
</div>
<!-- 专门用来打印pdf的 用一个图↓ -->
<canvas id="canvas"></canvas>
方法：
init(){
var container = document.querySelector(".base-video-source");
var videoElement = document.createElement("video");
videoElement.setAttribute("controls", "controls");
videoElement.setAttribute("crossorigin", "anonymous");
video.setAttribute("width", "800");
videoElement.src = this.eviDocContent.originData.evidenceHostUrl; // 指定视频文件路径 .mp4
videoElement.id = "videoplayer";
videoElement.style = `display:block;width:100%;height:${this.videocontentHeight}px`;
videoElement.controls = true; // 显示控制条
videoElement.muted = true; // 显示控制条
videoElement.autoplay = true; // 不自动播放
// 将视频元素添加到容器中
container.appendChild(videoElement);
},
exportEvidence2Pdf(){ //导出
// 视频添加背景图
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const videos = document.querySelectorAll("video");
let w, h;
for (let i = 0, len = videos.length; i < len; i++) {
const v = videos[i];
if (!v.src) continue; // no video here
try {
w = v.videoWidth;
h = v.videoHeight;
canvas.width = w;
canvas.height = h;
ctx.fillRect(0, 0, w, h);
ctx.drawImage(v, 0, 0, w, h);
ctx.drawImage(v, 0, 0, w, h);
const imageDataURL = canvas.toDataURL("image/png");
//v.style.backgroundSize = "cover";
v.style.backgroundImage = `url(${canvas.toDataURL()})`;
v.style.backgroundSize = "50% 90%";
v.style.backgroundRepeat = "no-repeat";
v.style.backgroundPosition = "center";
ctx.clearRect(0, 0, w, h);
} catch (e) {
continue;
}
}
setTimeout(function () {
that.loading = true;
console.log(that.definition + "-----------");
getPdf(that.definition,document.getElementById("pdfDom"), function () {
setTimeout(function () {
that.loading = false;
that.istoExportPdf = false;
document.getElementById("canvas").style.display ='none'
}, 500);
});
}, 500);
}链接：
前端导出pdf、word、pdf、excel、txt、svg文档
https://www.5axxw.com/questions/simple/sonqdu
vue使用 html2和jspdf 导出pdf不清晰
【jspdf】前端html生成pdf的两种办法 以及 引入中文字体-CSDN博客
前台导出pdf经验汇总 （html2canvas.js和浏览器自带的打印功能-print.js）以及后台一些导出pdf的方法_iqc后台管理系统怎么做到导出pdf-CSDN博客
实现思路：
将html页面生成pdf文件，需首先将页面转换为图片，然后再输出成pdf。 1. 用到2个插件 html2canvas：html转canvas---- html2canvas官网------下载地址 jsPDF：下载地址 canvas生成pdf（使用Javascript语言生成PDF的开源库） jspdf用法：将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置。 2. npm安装插件 npm install html2canvas npm install jspdf
问题总结：
问题1：导出的pdf很模糊。
解决方法：设置画布(canvas)的dpi为300，scale为2，上个伪代码:
html2canvas(ele, {
useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
dpi: 300, // 提升导出的文件的分辨率
scale: 2 // 提升导出的文件的分辨率
}).then(async canvas => {})问题2：需要导出的dom节点的高度和宽度是大于当前浏览器的可视窗口时，导出后发现导出的内容只包含了可视窗口的内容。
解决方法：检查你在设置画布(canvas)的宽高时是否是通过获取dom元素的scrollHeight(dom元素的高度，
包含纵向滚动条的高度)，scrollWidth(dom元素的宽度，包含横向滚动条的款度)。
还有可能是你所打印的dom节点没有全部展示，要给dom一个高度，让其全部展示，不能使用overflow：auto，
不能将滚动条隐藏，否则都会出现打印不全或者dom丢失问题
问题3： 导出的pdf，某个模块被截断了，eg：一个table被分到了两个页面。
解决方法：可参考该博客：改博主已经给出了代码html转pdf分页的问题
问题4： 导出的pdf部分元素缺失，这个问题只会在pdf的内容过大时出现，我是在导出的pdf在5M左右时出现的，当你确定你的缺失的元素是在你要导出的dom内时，若导出的pdf还是有部分内容缺失那你大概率是和我碰到一样的问题了。
解决方法：由原来的一次截图，换为分多次截图，将原来dom里面的元素进行克隆放进多个div中，由原来的对dom进行截图
换为循环对多个div进行截图即可。（如果看不懂这个处理方式，请先了解html2canvas+jsPDF是如何将html转为pdf的）
在你循环进行截图时有可能出现最后pdf里面的内容顺序是错乱的，出现这个问题是因为第一个div转为的图片添加到pdf中
还未添加完，第二个div就已经截图完也开始向pdf添加图片了。此时需要在第二个div截图完向pdf添加图片的方法设置等待时间：
上个伪代码
let imgBase64 = canvas.toDataURL('image/jpeg', 1.0)
setInterval(()=>{
pdf.addImage(imgBase64, 'JPEG', 0, 0, imgWidth, imgHeight)；
}, 3000);问题及解决方法
如果我们想要输出多页pdf，需要清晰度更高的，同时内容不被截断的改怎么办呢？
1.输出多页pdf
// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
// 导出之前先将滚动条置顶,不然会出现数据不全的现象
window.pageYOffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
var element = document.getElementById('pdfCentent')
element.style.background = '#FFFFFF'
html2canvas(element, {
logging: false,
dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
scale: 4, // 按比例增加分辨率
element: element,
backgroundColor: '#ffffff',
allowTaint: true,
useCORS: true
}).then(function (canvas) {
var pdf = new JSPDF('p', 'mm', 'a4') // A4纸，纵向
pdf.setFontSize(30) // 字体大小
// pdf.text(20, 30, pdf)
var ctx = canvas.getContext('2d')
var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
var renderedHeight = 0
var options = { pagesplit: true }
while (renderedHeight < canvas.height) {
var page = document.createElement('canvas')
page.width = canvas.width
page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
// 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距
renderedHeight += imgHeight
if (renderedHeight < canvas.height) { pdf.addPage(element, options, function () {}) }// 如果后面还有内容，添加一个空页
// delete page;
}
pdf.save(htmlTitle + currentTime)
})
}
}
}
2.清晰度更高：
// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
// 清晰度更高
var downPdf = document.getElementById('pdfCentent')
html2canvas(downPdf, {
logging: false,
// dpi: 172,
dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
scale: 4 // 按比例增加分辨率
}).then(function (canvas) {
console.log('canvas: ', canvas)
var contentWidth = canvas.width
var contentHeight = canvas.height
// 一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89
// 未生成pdf的html页面高度
var leftHeight = contentHeight
// pdf页面偏移
var position = 0
// html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）
var imgWidth = 595.28
var imgHeight = 592.28 / contentWidth * contentHeight
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdf = new JSPDF('', 'pt', 'a4')
// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= 841.89
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage()
}
}
}
pdf.save(htmlTitle + currentTime)
// 背景设为白色（默认为黑色）
// background: '#fff'
})
}
}
}
3.内容不被截断，也就是把所有的内容放一页：
// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
install (Vue, options) {
Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
// -------------输出pdf为一页，解决分页内容截断问题，单在pdf打印时会出错-------------
var mainRight = document.getElementById('pdfCentent')
html2canvas(mainRight, {
allowTaint: true,
scale: 2 // 提升画面质量，但是会增加文件大小
}).then(function (canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
var pageData = canvas.toDataURL('image/jpeg', 0.4)
var pdfWidth = (contentWidth + 10) / 2 * 0.75
var pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白
var imgWidth = pdfWidth
var imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离
var pdf = new JSPDF('', 'pt', [pdfWidth, pdfHeight])
pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
// pdf.save('report_pdf_' + new Date().getTime() + '.pdf')
pdf.save(htmlTitle + currentTime)
})
}
}
}
具体代码
//别忘记引入
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';
const exportPdf = () => {
console.log("导出pdf");
//需要打印容器最外层的id为 testPdf
//调用downloadPDF()
downloadPDF(document.querySelector('#testPdf'), '666',callback())
function callback() {
console.log('导出成功！');
}
}封装好的导出函数，记得引入js插件
推荐使用方法1
封装方法1：
/**
* ele:需要导出的容器
* pdfName：导出文件的名字
* callback: 成功回调
*/
function downloadPDF(ele: any, pdfName: any, callback: any) {
html2canvas(ele, {
dpi: 300,
scale: 3,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
width:ele.scrollWidth,
height:ele.scrollHeight,
}).then((canvas) => {
//未生成pdf的html页面高度
var leftHeight = canvas.height;
var a4Width = 595.28
var a4Height = 801.89 //（一张A4高=841.89减去20，使得上下边距空出20,pdf.addImage生成上边距（第四个参数=10）致使使得上下边距各10）
//一页pdf显示html页面生成的canvas高度;
var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);
//pdf页面偏移
var position = 0;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('x', 'pt', 'a4');
var index = 1,
canvas1 = document.createElement('canvas'),
height;
pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');
function createImpl(canvas) {
if (leftHeight > 0) {
index++;
var checkCount = 0;
if (leftHeight > a4HeightRef) {
var i = position + a4HeightRef;
for (i = position + a4HeightRef; i >= position; i--) {
var isWrite = true
for (var j = 0; j < canvas.width; j++) {
var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data
if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
isWrite = false
break
}
}
if (isWrite) {
checkCount++
if (checkCount >= 10) {
break
}
} else {
checkCount = 0
}
}
height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
if (height <= 0) {
height = a4HeightRef;
}
} else {
height = leftHeight;
}
canvas1.width = canvas.width;
canvas1.height = height;
var ctx = canvas1.getContext('2d');
ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);
if (position != 0) {
pdf.addPage();
}
// 在pdf.addImage(pageData, 'JPEG', 左间距，上间距，宽度，高度)设置在pdf中显示；
pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 10, a4Width, a4Width / canvas1.width * height);
leftHeight -= height;
position += height;
if (leftHeight > 0) {
setTimeout(createImpl, 500, canvas);
} else {
pdf.save(pdfName);
callback()
}
}
}
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < a4HeightRef) {
pdf.addImage(pageData, 'JPEG', 0, 10, a4Width, a4Width / canvas.width * leftHeight);
pdf.save(pdfName)
callback()
} else {
try {
pdf.deletePage(0);
setTimeout(createImpl, 500, canvas);
} catch (err) {
console.log(err);
}
}
})
}封装方法二：
function downloadPDF2(ele: any, pdfName: any) {
let eleW = ele.scrollWidth; // 获得该容器的宽
let eleH = ele.scrollHeight; // 获得该容器的高
let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
console.log(eleW,eleH,eleOffsetTop,eleOffsetLeft,'eleOffsetLeft');
var canvas = document.createElement("canvas");
var abs = 0;
let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
console.log(win_out,'win_out');
if (win_out > win_in) {
abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
}
canvas.width = eleW * 2; // 将画布宽高放大两倍
canvas.height = eleH * 2;
console.log(canvas,'canvas');
var context = canvas.getContext("2d");
context.scale(2, 2);
context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
// translate的时候，要把这个差值去掉
// html2canvas(element).then( (canvas)=>{ //报错
// html2canvas(element[0]).then( (canvas)=>{
html2canvas(ele, {
dpi: 300,
// 这里是画布放大的倍数，导出的文档更加清晰
scale: 1,
// allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
width:ele.scrollWidth,
height:ele.scrollHeight,
}).then((canvas) => {
var contentWidth = canvas.width;
var contentHeight = canvas.height;
console.log(contentWidth,contentHeight,'contentHeight');
// 一页pdf显示html页面生成的canvas高度;
var pageHeight = contentWidth / 592.28 * 841.89;
// 未生成pdf的html页面高度
var leftHeight = contentHeight;
// 页面偏移
var position = 0;
// a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
var imgWidth = 595.28;
var imgHeight = 595.28 / contentWidth * contentHeight;
var pageData = canvas.toDataURL('image/jpeg', 1.0);
var pdf = new JsPDF('', 'pt', 'a4');
// 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
// 当内容未超过pdf一页显示的范围，无需分页
if (leftHeight < pageHeight) {
// 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
} else { // 分页
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
// 避免添加空白页
if (leftHeight > 0) {
pdf.addPage();
}
}
}
//可动态生成
pdf.save(pdfName);
})
}纯前端导出word文档方法与技巧
首先介绍一下两个插件，可能用一个，可能用两个，根据需求自行选择 FileSaver.js ：下载地址 wordexport.js ：下载地址
思路：
**先讲一下大体思路：就是讲需要的导出的页面文本dom节点，用模板字符串拼成一个变量（方便后续的书写），然后用插件中方法导出，就两行代码
用途：
**FileSaver.js用于保存文件，可以保存word、excel、txt、image等文件，有兴趣的可以去官网上多看看
问题总结：
**首先说一下想要导出word，是没有 块 概念的，你所导出的文本，涉及到布局的样式都会失效(如：margin，padding，float，diaplay，position)，想要解决可以巧用table去解决排版问题（仅能解决小部分），视情况而定
方法一：
方法一仅用 FileSaver 一个js
外部直接引入js：代码如下
let contentHtml = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fu-title {
width: 100%;
height: 5.31vw;
line-height: 5.31vw;
text-align: center;
font-family: '宋体';
font-size: 36px;
color: #fc3f3f;
}
</style>
</head>
<body>
<div class="fu logHistoryManage_detail">
<div class="fu-title">日志报表信息</div>
<form class="fu-form">
<table border="0" cellspacing="0">
<tr height="30" border='solid 1px red' style='color:#888'>
<td width="610" align="left">${sendDepartName ? sendDepartName : "ohqwzfw"}</td>
<td width="610" align="center" ></td>
<td width="610" align="right">${sendUserName} </td>
</tr>
</table>
<hr style='color:red;'/><br>
<div class="form-title" style="height: auto;">${title}</div>
<div class="form-summary" style="word-wrap: break-word;">
${content ? content : ''
}
</div>
<br>
<!-- 领导批示 -->
<div>
<h2>领导批示</h2>
<table border="1" cellspacing="0">
<tr height="50">
<td width="200" align="center">姓名</td>
<td width="600" align="center">批示内容</td>
<td width="200" align="center">批示时间</td>
</tr>
${leaderIdeaList.length>0?leaderIdeaList.map((item, index) => {
return `
<tr height="100">
<td width="200" align="center">${item.optUserName}</td>
<td width="600" align="center">${item.remark ? item.remark : '暂无内容'}</td>
<td width="200" align="center">${item.createTime ? item.createTime : ''}</td>
</tr>
`
}):`<tr height="100">
<td width="200" align="center"></td>
<td width="600" align="center"></td>
<td width="200" align="center"></td>
</tr> `
}
</table>
</div>
</form>
</div>
</body>
</html>
`
//重要的代码就这两行----这里是项目中没有npm包管理外部直接引用的js
let blob = new Blob([contentHtml], { type: "application/msword;charset=utf-8" });
saveAs(blob, "日志报表信息.docx");使用包管理安装 FileSaver
首先需要安装：fileSaver
import FileSaver from 'file-saver';
import htmlDocx from "html-docx-js/dist/html-docx"
import { G } from '@/global';
const { rootUrl, rbacToken } = G;
let cycle_info1 = [
{
name: '事件类型',
key: 'eventTypeName',
},
{
name: '地点定位',
key: 'locationAddress',
},
{
name: '上报时间',
key: 'reportTime',
},
{
name: '人员姓名',
key: 'reportUserName',
},
{
name: '联系方式',
key: 'reportUserPhone',
},
]
const model = (reportInfoDetail: any, list: any, eventState: any) => {
// console.log(reportInfoDetail, list, eventState);
return (
`
<!DOCTYPE html>
<html>
<head>
<style>
.MaxBox {
padding: 0px 15px;
overflow-y: auto;
height: 50vh;
}
.fromBox {}
.formTitle_first {
color: #1c69f7;
font-size: 23px;
font-weight: bold;
margin-bottom: 10px;
}
.formTitle_second {
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}
.formContent_box {
margin-bottom: 5px;
}
.formContent_box_title {
min-width: 60px;
}
.display_flex {
display: flex;
}
</style>
</head>
<body>
<div class="MaxBox">
<div class="fromBox">
<div class="formTitle_first">上报信息</div>
<div class="formTitle_second">上报信息</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title" >事件类型：</span>
<span>${reportInfoDetail['eventTypeName']}</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">地点定位：</span>
<span>${reportInfoDetail['locationAddress']}</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">上报时间：</span>
<span>${reportInfoDetail['reportTime']}</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">人员姓名：</span>
<span>${reportInfoDetail['reportUserName']}</span>
</div>
<div class="formContent_box display_flex" style="display:flex">
<span class="formContent_box_title">联系方式：</span>
<span>${reportInfoDetail['reportUserPhone']}</span>
</div>
<div class="formTitle_second">图片附件</div>
<div class="formContent_box">
${reportInfoDetail['picIds']?.map((res1: any, idx1: any) => {
return `
<img width='240' height='160' src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"
style='margin-right:5px'
/>
${((idx1 + 1) % 2 == 0) ? `<br />` : ''}
`
})
}
</div>
<div class="formTitle_second">事件描述</div>
<div class="formContent_box">${reportInfoDetail['description']}</div>
</div>
${reportInfoDetail.assignInfo.length != 0 ?
`
<div class="fromBox">
<div class="formTitle_first">指派信息</div>
<div class="formTitle_second display_flex">指派信息</div>
<div class="formContent_box">
<div class="formContent_box_title">指派单位：
${reportInfoDetail.assignInfo.map((res: any, idx: any) => {
return `
<span style="margin-right:15px">
${res.departmentName}
</span>
`
})
}
</div >
</div >
<div class="formContent_box display_flex">
<span class="formContent_box_title">指派时间：</span>
<span>${!!reportInfoDetail?.assignInfo[0]?.assignTime ? reportInfoDetail?.assignInfo[0]?.assignTime : ""}</span>
</div>
</div>
`: ''
}
<div class="fromBox">
<div class="formTitle_first">处置信息</div>
${reportInfoDetail.handleInfo.length != 0 ?
reportInfoDetail.handleInfo.map((itm: any, idx: any) => {
return `
<div class="formTitle_second">单位${idx + 1}：${itm['claimDepartmentName']}</div>
<div class="formTitle_second">签收信息</div>
<div class="formContent_box display_flex"
style="width:32vw;justify-content: space-between;">
<div>
<span>签收单位：${itm['claimDepartmentName']}</span>
</div>
<div>
<span>签收时间：${itm['claimTime']}</span>
</div>
</div >
<div class="formTitle_second">图片附件</div>
<div class="formContent_box">
${itm['handleTime'] != null ?
itm['handlePicIds']?.map((res1: any, idx1: any) => {
return `
<img width="240" height="160"
src="${rootUrl}/fyVolunteer/file/download/${res1}?rbacToken=${rbacToken}"
style="margin-right:5px"
/>
${(idx1 + 1) % 2 == 0 ? `<br />` : ''}
`
}) : `<span style="color:#5558e8">无</span>`
}
</div>
<div class="formTitle_second">处置描述</div>
<div class="formContent_box">${itm.handleTime != null ? itm['handleDescription'] : `<span style="color:#5558e8">未上传处置</span>`}</div>
<div class="formTitle_second">上报信息</div>
<div class="formContent_box display_flex"
style="width:32vw;justify-content: space-between;">
<div>
<span>上报单位：${itm['claimDepartmentName']}</span>
</div>
<div>
<span>上报时间：${itm['handleTime'] != null ? itm['handleTime'] : ''}</span>
</div>
</div>
<br/>
`
}) : '无数据'
}
</div >
<div class="fromBox">
<div class="formTitle_first">其他信息</div>
<div class="formContent_box display_flex">
<span class="formContent_box_title">信息状态：</span>
<span>
${list[eventState - 1].desc}
${reportInfoDetail?.finishTime != null ? reportInfoDetail?.finishTime : ''}
</span>
</div>
<div class="formContent_box display_flex">
<span class="formContent_box_title">采纳状态：</span>
<span>${reportInfoDetail.acceptInfo == null ? "未采纳" : `已采纳(${reportInfoDetail.acceptInfo.integral})`}</span>
</div>
</div>
</div >
</body >
</html >
`
)
}
const loadFile = (info: any) => {
let html = model(info.reportInfoDetail, info.list, info.eventState)
let blob = new Blob([html], { type: "application/msword;charset=utf-8" });
// let blob = htmlDocx.asBlob(html, { orientation: "landscape" });
FileSaver.saveAs(blob, "信息管理文件.doc");
}
export {
loadFile
};方法二：
两个js都需要引入，还需要引入jquery.js,最好1.8版本以上的
在这里插入图片描述
原理和那个差不多，只是理解起来比较简单，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意引入的顺序 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src='./jquery.wordexport.js'></script>
<style>
.word-export,.test {
display: block;
padding: 10px;
width: 80px;
background-color: rgb(56, 131, 230);
}
</style>
<body>
<span class="word-export">导出word</span>
<div id="page-content2" style="display:flex;justify-content:space-between;">
<div id="page-content">
jquery 测试
</div>
<div id="page-content1">
jquery 测试
</div>
</div>
<script type="text/javascript">
$(".word-export").click(function (event) {
// 打印节点就可以
$("#page-content2").wordExport("测试");
});
</script>
</body>
</html>导出svg
let type = 'svg'
// html中需要导出的部分的id为sankey
const element = document.getElementById('sankey');
const chartInstance = echarts.getInstanceByDom(element);
if (element) {
// echarts官网文档实例方法getDataURL
let picInfo = chartInstance.getDataURL({
type: 'png',
pixelRatio: 1.0, // 放大两倍下载。解决生成图片在移动端模糊问题
backgroundColor: '#fff',
excludeComponents: ['toolbox'] // 导出时忽略toolbox组件
});// 获取到的是一串base64信息
let mycanvas = document.querySelector('#' + element.id + ' canvas');
//设置svg标签属性
let svg0 = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg0.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg0.setAttribute('version', '1.1');
svg0.setAttribute('height', '800');
svg0.setAttribute('width', '1700');
let img3 = document.createElementNS('http://www.w3.org/2000/svg', 'image');
// base64编码写入href
img3.href.baseVal = picInfo;
img3.setAttribute('height', '800');
svg0.appendChild(img3);
let h = svg0.outerHTML;
//给图片对象写入base64编码的svg流
let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)));
const elink = document.createElement('a');
// 设置默认文件名，this.chartTitle为绘图时生成的标题
elink.download = '桑基图' + ".svg";
elink.style.display = 'none';
elink.href = data;
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
