vue项目中增长打印功能

时间 2019-11-19
标签 vue 项目增长打印功能繁體版
原文原文链接
// 建立一个div用来存放打印的内容
let dom = document.createElement("div");
// html须要打印的内容按照需求本身定义内容和样式
let html = `<div id="printContent" style="width: 210mm;}"></div>`;
// 将html放入div
dom.innerHTML = html;
// 建立一个iframe并制定样式和属性
let iframeDom = document.createElement("iframe");
const attrObj = {
  height: 0,
  width: 0,
  border: 0,
  wmode: "Opaque"
};
const styleObj = {
  position: "absolute",
  top: "-999px",
  left: "-999px"
};
Object.entries(attrObj).forEach(([key, value]) =>
  iframeDom.setAttribute(key, value)
);
Object.entries(styleObj).forEach(([key, value]) => {
  iframeDom.style[key] = value;
  return "";
});
// 将iframe插入到页面id为app的标签前面
document.body.insertBefore(iframeDom, document.getElementById("app"));
// 获取到iframe中的window对象
let iframeWin = iframeDom.contentWindow;
let iframeDocs = iframeWin.document;
iframeDocs.write(`<!doctype html>`);
iframeDocs.write(dom.innerHTML);
iframeWin.print();
setTimeout(() => {
  document.body.removeChild(iframeDom);
}, 1000);