- 46
- 0
根据屏幕大小不同,页面内容自适应并一页展示,应该如何实现
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
install (Vue, options) {
Vue.prototype.getPdf = function () {
setTimeout(() => {
var title = this.htmlTitle
let pdfDom_html = document.getElementsByClassName('pdfDom')
let PDF = new JsPDF('', 'pt', 'a4')
var imgArr = new Array();
let scale = 2 //获取像素密度的方法 (也可以采用自定义缩放比例)
for(var i = 0; i< pdfDom_html.length; i++) {
html2Canvas(pdfDom_html[i], {
useCORS: true,//允许加载跨域的图片
allowTaint: true,//允许跨域图片
scale: scale // 添加的scale 参数
}).then(function (canvas) {
let contentWidth = canvas.width
console.log(contentWidth, 'contentWidth')
let contentHeight = canvas.height
console.log(contentHeight, 'contentHeight')
//a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = (592.28 / contentWidth * contentHeight)
console.log(imgHeight, 'imgHeight')
//返回图片dataURL,参数:图片格式和清晰度(0-1)
// let pageData = canvas.toDataURL('image/png', 1.0)
var pageData = new Image();
pageData.src = canvas.toDataURL('image/jpeg', 1.0);
imgArr.push(pageData)
if (imgArr.length == pdfDom_html.length) {
for(var j = 0; j < imgArr.length; j++) {
PDF.addImage(imgArr[j].src, 'JPEG', 0, 0, imgWidth, imgHeight)
if (j < imgArr.length - 1) {
PDF.addPage()
}
}
PDF.save(title + '.pdf')
}
})
}
}, 100)
}
}
}
0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
妖蛇噬天 普通会员 1楼
要根据分辨率生成PDF内容并自适应,可以使用HTML2Canvas和pdf.js库。以下是一个基本的示例:
首先,确保已经安装了所需的库。如果没有,请使用以下命令安装:
npm install html2canvas pdfjs然后,你可以使用以下HTML代码创建一个包含PDF内容的区域:
```html
PDF Content Generator ```
这段代码将创建一个800x600像素的PDF,并将PDF内容写入名为output.pdf的文件中。你需要根据你的需要修改HTML和CSS,以便根据不同的分辨率生成PDF内容。
注意:这个示例假设你已经将pdf.js库添加到你的HTML文件中。如果没有,你可以使用以下代码安装:
npm install pdfjs此外,这个示例使用的是HTML5的canvas元素,如果你使用的是旧版本的浏览器(如IE),可能需要使用其他方法来获取canvas元素。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
