vue 前端png转pdf_vue导出pdf
1 、我们要添加两个模块
第一个.将页面html转换成图片
npm install --save html2canvas
第二个.将图片生成pdf
npm install jspdf --save
2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
var title = this.htmlTitle
html2Canvas(document.querySelector('#pdfDom'), {
allowTaint: true
}).then(function (canvas) {
let contentWidth = canvas.width
let contentHeight = canvas.height
let pageHeight = contentWidth / 592.28 * 841.89
let leftHeight = contentHeight
let position = 0
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL('image/jpeg', 1.0)
let PDF = new JsPDF('', 'pt', 'a4')
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(title + '.pdf')
}
)
}
}
}
3、在main.js中使用我们定义的函数文件。
import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)
4、在需要的导出的页面..调用我们的getPdf方法即可.
//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
导出PDF
js
export default {
data () {
return {
htmlTitle: '页面导出PDF文件名'
}
}
}
vue 前端png转pdf_vue导出pdf相关推荐
- vue 前端png转pdf_Vue前端HTML保存为PDF的两种常用方式 「干货分享」
Vue前端HTML保存为PDF常用方式有两种.使用html2Canvas和JsPDF库,转化为图片后保存PDF. 调用浏览器window.print(),然后手动保存为PDF. 第一种 优点没有预览点 ...
- ant jeecg vue 前端通过dom节点 导出xlsx表格
点击导出 : 效果图: 上代码 安装依赖:npm install xlsx@0.17.0 file-saver@2.0.5 --save xlsx要指定版本不然会报错 <template& ...
- vue 前端表格导入与导出
excel导入到表格 表格导入与导出,文末带Blob.js和Export2Excel.js 导入按钮 <input type="file" @change="imp ...
- vue前端接收后端URL导出elsx
1.引入导出URL方法 export const download = (urls) => {let name = urls// let url = window.URL.createObjec ...
- vue:前端导出PDF 加图片:前端
npm i vue-to-pdf --save <div id="exportPdf" ref="exportPdf"></div> & ...
- SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
- vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
- vue前端生成PDF文档+电子印章并导出(不用后端)
效果图: 环境安装 将页面html转换成图片 npm install --save html2canvas 将图片生成pdf npm install jspdf --save 创建htmlToPdf. ...
- 前端(vue)导出pdf
纯前端导出 pdf 实现方法如下: 1. 安装 html2pdf.jspdf npm install html2canvas jspdf --save 2. 项目 utils 文件夹中新建一个 htm ...
最新文章
- window.onload和$(document).ready()区别很大……
- 云端计算模型的MATLAB仿真与分析
- 【Transformer】CrossFormer:A versatile vision transformer based on cross-scale attention
- mysql007.算数运算.别名.去重.排序
- SNMP实现交换机的信息采集——MIB
- 将输入的字符串进行大写格式化
- matlab 峰值提取,Matlab2019b信号峰值检测与提取
- 简单博饼游戏的实现(java)
- [J2SE]JTree使用DefaultTreeModel,对节点进行增删、拖拽和展开操作,以及跨平台文件拖拽的方法详细介绍
- 主会场与分会场直播场景自由切换的实际应用效果
- 新元宇宙奇科幻小说原创作品每周连载《地球人奇游天球记》第九回女神伴飞
- 有关获取并保存微信头像到本地服务器
- 用python爬取全国和全球疫情数据,并进行可视化分析(过程详细代码可运行)
- 《2019全球仓储自动化50强企业排行榜》
- python:open()方法+循环语句 练习
- NOWCODER 白魔法师(图,并查集)
- 创建三维空间平面-python笔记
- 科技品牌软文营销的十个建议,提高你的写作水平
- Photoshop CC 2019( ps cc)新增功能使用方法介绍
- Python计时工具