前端转换为pdf的方法之一

利用插件html2canvas 和jspdf

第一步安装 html2canvas 和jspdf

npm install html2canvas --save //html页面转换成图片

npm install jspdf --save //把base64转换为PDF

第二步检查是否有图片，没有图片直接进入第三步

根据后台方法

import axios from 'axios'

export function img2base64(src) {

return axios({

method: 'post',

url: ``,//自己的url

data: { src: src }

})

}

第三步建立htmlToPdf.js文件，我编写的路径为utils/htmlToPdf，如果只需要导出，到下面的PDF.save(title + '.pdf') //到此可以直接下载

打印的话，需要接口转换

// html文档转换为pdf

import axios from 'axios'

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

const url = '' //自己的url地址

var PDF = new JsPDF('', 'pt', 'a4')

export function getPdf(title,id){

html2Canvas(document.querySelector(`#${id}`), {

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)

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') //到此可以直接下载

// 生产pdf 直接在网页预览有图片的话，需要调用接口转换

var dataUrl = PDF.output('dataurlstring')

var request = {

order_type: 1,

base64: dataUrl,

}

axios({

method: 'post',

url: `${url}/application/upload/PDFupload`,

data: request

}).then(res => {

const url1 = `${url}${res.data.data}`

window.open(url1, '_blank')

})

}

)

}

第四步，需要打印为页面，加入以以下代码，我这只是个模板，可以根据自己的需求及样式修改

<div>

多大的 hdhdhdhhdhda哈哈哈哈哈哈哈哈哈

</div>

<button type="primary" @click="exportPDF">导出PDF</button>

</div>

</template>

import { getPdf } from "@/utils/htmlToPdf";

import { img2base64 } from '@/api/upload'

export default {

data(){

return{

img_src:'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'

}

created(){

this.img_tobase64()

methods: {

img_tobase64() {

img2base64(this.img_src).then(res => {

this.img_src = res.data.data

})

// 导出PDF

exportPDF() {

getPdf("测试", "pdfHtml");

};

</script>

<style>

</style>

前端转换为pdf的方法之一相关推荐

python将文档转换成pdf_Python实现将DOC文档转换为PDF的方法
本文实例讲述了Python实现将DOC文档转换为PDF的方法.分享给大家供大家参考.具体实现方法如下: import sys, os from win32com.client import Dispa ...
CAD图纸转换为PDF的方法——Speedpdf免费在线CAD转PDF
CAD图纸怎么转换成PDF?相信很多人都经常遇到的问题,其实方法并不难,下面随小编一起来看看具体的操作步骤吧. 首先,推荐一款名的speedpdf的在线转换,网址为:https://speedpdf. ...
使用PHP将HTML + CSS转换为PDF？ [关闭]
关闭. 这个问题是题外话 . 它当前不接受答案. 想改善这个问题吗? 更新问题 ,使其成为Stack Overflow 的主题 . 3年前关闭. 我有一个HTML(不是XHTML)文档,可以在Fire ...
前端生成PDF 文件教程+在线demo案例
个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨 ...
ubuntu 下 python 将ppt,word 转换为pdf.
最近发现了一个挺厉害的人工智能学习网站,内容通俗易懂,风趣幽默,感兴趣的可以点击此链接进行查看:床长人工智能教程废话不多说,请看正文! 前言: 在我以前的博客中有这么两篇博客,一篇是:将word 转 ...
python ubuntu word txt 转pdf_ubuntu 下 python 将ppt,word 转换为pdf.
前言: 在我以前的博客中有这么两篇博客,一篇是:将word 转换为图片(word to pdf ->pdf to image),另一篇是:python将ppt文件转换为jpg图片. 这两篇博客都 ...
linux ubuntu下怎样将pdf格式文件转换为doc格式文件,如何在Ubuntu命令行上将文档转换为PDF格式...
在打印,共享和通过电子邮件发送文档(尤其是较大的文档)时,PDF或可移植文档格式通常是首选.对于Windows和macOS,您可能非常熟悉,也依赖于广泛使用的Acrobat产品进行pdf创建,查看和编 ...
ubuntu下使用python将ppt转成图片_在Ubuntu下，python将PPT和word转换为PDF,ubuntu,pptword,pdf...
前言: 在我以前的博客中有这么两篇博客,一篇是: python将ppt文件转换为jpg图片 . 这两篇博客都是讲如何将word,ppt转换为图片,但是这些方法都是在win系统中实现的,而在ubuntu ...
10秒将CAJ转换成PDF的方法，建议收藏！
将CAJ转换为PDF的方法,值得收藏!CAJ是中国电子期刊的一种独有文件格式,当在知网上下载论文时选择"CAJ下载"选项时,就是下载这种文件格式的文档.个人体验表明,CAJ这种格式 ...

前端转换为pdf的方法之一

前端转换为pdf的方法之一相关推荐

最新文章

热门文章