整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们在项目开发的时候，有时需要将js对象转换为数组，下面小编给大家具体演示一下怎么转换，主要是介绍一些常用、简洁的转换方法。
比如JavaScript对象如下：
let obj = {
'name': '前端',
'url': 'https://www.webadkf.com',
'des': '专注web前端开发',
};这里只需要它的值，我们需要转换的数组形式如：
['前端', 'https://www.webqdkf.com', '专注web前端开发']Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
let arr = Object.values(obj); //对象转化为数组ps：如果只需要返回键作为数组，可以使用Object.keys()的方式,所以结合Map，也可以实现：
let arr=Object.keys(obj).map(function(i){return obj[i]}); //对象转化为数组可以直接利用循环，如for in或者forEach()等：
var arr = []; //定义数组
for (var i in obj) {
arr.push(obj[i]);
}Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
var arr = Array.from(Object.values(obj),x=>x);家好，我是前端西瓜哥，今天说一下 JS 的类数组对象是什么，以及如何将类数组对象转为数组。
类数组对象，就是含有 length 属性的对象，但这个对象不是数组。
通常来说还会有 0 ～ length-1 的属性，结构表现上非常像一个数组。
const arrlike = {1:'a', 4: 'd', length: 9};
Array.isArray(arrlike) // false
从底层上来看，这个对象的原型链上没有 Array.prototype，所以我们不能用 Array.prototype 上的 forEach、map 等数组特有的方法。
关于原型链，可以看我的这篇文章：《如何用原型链的方式实现一个 JS 继承？》
如果强行给一个类数组对象使用 forEach 方法，会得到一个类型错误。
function f(a, b) {
arguments.forEach(item => console.log(item));
}
// Uncaught TypeError: arguments.forEach is not a function
除了手动创造的类数组对象，还有以下常见的类数组对象：
下面看看我们有哪些将类数组转换为数组的方法。
我们可以用 Array.prototyle.slice 内置方法。
Array.prototype.slice.call(obj);
[].slice.call(obj);
[] 空数组效果同 Array.prototype，因为空数组本身没有 slice 方法，会走原型链拿到 Array.prototype 的方法。空数组写法除了短一点没有任何优点。
然后 call 来自 Function.prototype，可以使用一个指定的 this 值来调用一个函数，这里是 Array.prototype.slice。我们不给 slice 方法传开始和结束位置参数，这样就会默认取整个范围。
slice 的迭代时会跳过不存在的索引属性，所以你会看到 empty 的特殊值，和 undefined 还有点不同，你可以认为表示未被初始化。forEach、map 这些内置方法是会跳过它们不执行传入的回调函数的。
一个例子：
const arrlike = {1:'a', 4: 'd', length: 9};
const arr = Array.prototype.slice.call(arrlike);
console.log(arr);
什么原理？
因为 slice 用于拷贝返回一个新的子数组，且只需要被操作的目标有 length 属性就行了。
下面是 Array.prototype.slice 的核心实现，默认 start 和 end 都在 length 范围内。
Array.prototype.mySlice = function(start, end) {
if (start == undefined) start = 0;
if (end == undefined) end = this.length;
const cloned = new Array(end - start);
for (let i = 0; i < cloned.length; i++) {
// 为了确保不存在的索引保持为 empty 值
if (i in this) {
cloned[i] = this[start + i];
}
}
return cloned;
}
你会发现，类数组对象替换掉这里的 this 后，能拷贝出一个真正数组。
ES6 新出的方法，可以将类数组对象或者是可迭代对象转换为数组。
const arrlike = {1:'a', 4: 'd', length: 9};
arr = Array.from(arrlike);
console.log(arr);和 Array.prototyle.slice.call() 有点不同，不存在的索引的值被设置了 undefined。
如果一个对象，既是类数组对象，又是可迭代对象，Array.from() 方法会使用该对象的迭代器方法。
一般来说，调用 JS 的内置方法返回类数组对象同时是可迭代对象，我们通常喜欢用扩展运算符（...），更优雅。
const elCollection = document.getElementsByTagName('div');
const elArray = [...elCollection];
一般来说，我们在开发中遇到的类数组对象都是 JS 内置方法返回的，同时也是可迭代对象，我们一般都是用 [...arrlik] 扩展运算符，咻咻咻搞定。
如果类数组对象不是可迭代对象，可以使用 Array.prototyle.slice.call() 和 Array.from()。
前者会对不存在的索引维持为 empty，后者则是 undefined。我们可以认为基本差别不大，建议用 Array.from()，语义化更好些。
何保持页面样式基本不变的前提下将HTML页面导出为PDF，下面提供一些示例代码，纯属个人原创，如对你有帮助请记得加关注、加收藏、点赞、转发、分享~谢谢~~
<div>
<!-- 要打印的内容区 -->
<div ref="contentRef">
<div class="print-item print-out-flow">这是脱离文档流的内容区域</div>
<div class="print-item">这是一行内容，也是最小叶子元素内容</div>
</div>
<!-- 打印内容容器 -->
<div ref="printContainerRef" class="print-container"></div>
</div>/**
* 1.使用一个隐藏div装载有滚动条的div.innerHTML
* 2.隐藏div使用position: absolute, z-index: -999, left: -9999px, width: 900px 控制让用户无感知
* 3.根据需要覆写隐藏div内html样式(例如textarea多行显示有问题, 可以新增一个隐藏的div
* 包裹textarea的绑定值, 然后在打印样式中覆写样式, 隐藏textarea并显示对应div)
*/
handleExport() {
// 下面是VUE组件内获取DOM元素代码，将内容放置到打印区（定义的隐藏DIV）中
const contentRef = this.$refs.contentRef as HTMLElement;
const printContainerRef = this.$refs.printContainerRef as HTMLElement;
// 打印区的需额外处理绝对定位值, 调整使得第一个元素的.top值为0, 以便于页面计算
printContainerRef.innerHTML = contentRef.innerHTML;
// 所有叶子div元素加上 print-item 样式名, 脱离文档流的额外添加 print-out-flow
handlePrintItem(printContainerRef); // 解决多页内容可能被切割问题
html2canvas(printContainerRef, {allowTaint: false, useCORS: true}).then((canvas: any) => {
const contentHeight = canvas.height;
const contentWidth = canvas.width;
// pdf每页显示的内容高度
const pageHeight = contentWidth / 595.28 * 841.89;
// 未生成pdf的页面高度
let offsetHeight = contentHeight;
// 页面偏移值
let position = 0;
// a4纸的尺寸[595.28, 841.89], canvas图片按a4纸大小缩放后的宽高
const imgWidth = 595.28;
const imgHeight = 595.28 / contentWidth * contentHeight;
const dataURL = canvas.toDataURL('image/jpeg', 1.0);
const doc = new jsPDF('p', 'pt', 'a4');
if (offsetHeight < pageHeight) {
doc.addImage(dataURL, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (offsetHeight > 0) {
doc.addImage(dataURL, 'JPEG', 0, position, imgWidth, imgHeight);
offsetHeight -= pageHeight;
position -= 841.89;
if (offsetHeight > 0) {
doc.addPage();
}
}
}
doc.save(this.generateReportFileName());
printContainerRef.innerHTML = '';
});
}上干货代码：上面分页导出PDF可能网上能看到类型代码，但绝对找不到下面的代码，纯手搓解决分页元素被切开问题（思路：获取自身定位，如自己刚好在被分页处，则加上一定的margin-top值将内容向下移）
/**
* 处理打印元素项, 修复分页后被切割的元素
* @param printContainerRef 打印内容div容器
* @param itemClassName 打印最小元素标识类名
* @param outFlowClassName 脱离文档流的元素标识类名
*/
export function handlePrintItem(
printContainerRef: HTMLElement,
itemClassName: string = 'print-item',
outFlowClassName: string = 'print-out-flow'
): void {
const rootClientRect = printContainerRef.getBoundingClientRect();
// 初始化页面相关数据
const totalHeight = rootClientRect.height; // 内容总高度
const a4PageHeight = (printContainerRef.clientWidth / 595.28) * 841.89; // a4纸高度
let pageNum = Math.ceil(totalHeight / a4PageHeight); // 总页数
let addPageHeight = 0; // 修正被分割元素而增加的页面高度总和
let currentPage = 1; // 当前正在处理切割的页面
const splitItemObj: { [key: number]: HTMLElement[] } = {}; // 内容中各页被切割元素存储对象
const printItemNodes: NodeListOf<HTMLElement> = printContainerRef.querySelectorAll(`.${itemClassName}`);
for (let item of printItemNodes) {
// 如果当前页已经是最后一页, 则中断判断
if (currentPage >= pageNum) {
break;
}
// 获取元素绝对定位数据
const clientRect = item.getBoundingClientRect();
let top = clientRect.top;
const selfHeight = clientRect.height;
// 如果当前元素距离顶部高度大于当前页面页脚高度, 则开始判断下一页页脚被切割元素
if (top > currentPage * a4PageHeight) {
// 换页前修正上一页被切割元素
addPageHeight += fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
pageNum = Math.ceil((totalHeight + addPageHeight) / a4PageHeight);
top = item.getBoundingClientRect().top;
currentPage++;
}
// 如果元素刚好处于两页之间, 则记录该元素
if (top > (currentPage - 1) * a4PageHeight && top < currentPage * a4PageHeight && top + selfHeight > currentPage * a4PageHeight) {
if (!splitItemObj[currentPage]) {
splitItemObj[currentPage] = [];
}
splitItemObj[currentPage].unshift(item);
// 如果当前元素是最后一个元素, 则直接处理切割元素, 否则交由处理下一页元素时再处理切割
if (item === printItemNodes[printItemNodes.length - 1]) {
fixSplitItems(currentPage, a4PageHeight, splitItemObj[currentPage], outFlowClassName);
}
}
}
}
/**
* 修复当前页所有被切割元素
* @param currentPage 当前页
* @param pageHeight 每页高度
* @param splitElementItems 当前被切割元素数组
* @param outFlowClassName 脱离文档流的样式类名
*/
function fixSplitItems(
currentPage: number,
pageHeight: number,
splitElementItems: HTMLElement[],
outFlowClassName: string
): number {
if (!splitElementItems || !splitElementItems.length) {
return 0;
}
const yMargin = 5; // y方向距离页眉的距离
const splitItemsMinTop = getSplitItemsMinTop(splitElementItems);
if (!splitItemsMinTop) {
return 0;
}
let fixHeight = currentPage * pageHeight - splitItemsMinTop + yMargin;
const outFlowElement = splitElementItems.find((item) => item.classList.contains(outFlowClassName));
if (outFlowElement && outFlowElement.parentElement) {
const parentPreviousElement = outFlowElement.parentElement.previousElementSibling as HTMLElement;
fixHeight += getMarinTopNum(parentPreviousElement, outFlowElement.parentElement);
outFlowElement.parentElement.style.marginTop = `${fixHeight}px`;
return fixHeight;
}
splitElementItems.forEach((splitElement) => {
splitElement.style.marginTop = `${fixHeight}px`;
});
return fixHeight;
}
/**
* 获取被切割元素数组中最小高度值（如一行有多个元素被切割，则选出距离顶部最小的高度值）
* @param splitElementItems 当前被切割元素数组
*/
function getSplitItemsMinTop(
splitElementItems: HTMLElement[]
): number | undefined {
// 获取元素中最小top值作为基准进行修正
let minTop: number | undefined;
let minElement: HTMLElement | undefined;
splitElementItems.forEach((splitElement) => {
let top = splitElement.getBoundingClientRect().top;
if (minTop) {
minTop = top < minTop ? top : minTop;
minElement = top < minTop ? splitElement : minElement;
} else {
minTop = top;
minElement = splitElement;
}
});
// 修正当前节点及其前面同层级节点的margin值
if (minTop && minElement) {
const previousElement = splitElementItems[splitElementItems.length - 1].previousElementSibling as HTMLElement;
minTop -= getMarinTopNum(previousElement, minElement);
}
return minTop;
}
/**
* 通过前一个兄弟元素和元素自身的位置确认一个距离顶部高度修正值
* @param previousElement 前一个兄弟元素
* @param curElement 当前元素
*/
function getMarinTopNum(previousElement: HTMLElement, curElement: HTMLElement): number {
let preMarginNum = 0;
let curMarginNum = 0;
if (previousElement) {
// 获取外联样式需要getComputedStyle(), 直接.style时对象的值都为空
const previousMarginBottom = window.getComputedStyle(previousElement).marginBottom;
preMarginNum = previousMarginBottom ? Number(previousMarginBottom.replace('px', '')) : 0;
}
const marginTop = window.getComputedStyle(curElement).marginTop;
curMarginNum = marginTop ? Number(marginTop.replace('px', '')) : 0;
return preMarginNum > curMarginNum ? preMarginNum : curMarginNum;
}以上纯原创！欢迎加关注、加收藏、点赞、转发、分享（代码闲聊站）~
*请认真填写需求信息，我们会在24小时内与您取得联系。
