整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
何保持頁面樣式基本不變的前提下將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;
}以上純原創！歡迎加關注、加收藏、點贊、轉發、分享（代碼閑聊站）~
我使用 Fabric.js 的版本是 4.6.0。
這次要實現的效果是：在本地上傳一張圖片，然后渲染到 canvas 里（當做背景圖）。
我會用 原生 的方法實現一次，然后再在 Vue3 + Element-plus 環境下實現一次。
最后聊聊我在真實項目中的做法。
需求：
需要注意的是，本文主要實現 上傳圖片并渲染到畫布 的邏輯，所以沒有做上傳文件類型的限制，也沒做文件大小限制。如果你的業務中需要限制文件類型，只需在本案例基礎上添加限制的方法就行了。
本文所有代碼都在文末給出的倉庫里。
如果本文內容對你有所幫助，也請你幫我點個贊唄~
通過 <input type="file" /> 獲取圖片路徑，會受到瀏覽器安全策略影響，所以需要處理一下。
實現邏輯：
<div>
<input type="file" name="file" id="upload" onchange="handleUpload()" />
<button onclick="saveCanvas()">保存</button>
</div>
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
<!-- 引入fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script>
<script>
// 上傳文件的DOM元素
const uploadEl = document.getElementById("upload")
// 畫布
let canvas = null
// 初始化畫布
function initCanvas() {
canvas = new fabric.Canvas('canvas')
}
// 上傳文件事件
function handleUpload() {
// 上傳文件列表的第一個文件
const file = uploadEl.files[0]
// 圖片文件的地址
let imgPath = null
// 獲取圖片文件真實路徑
// 由于瀏覽器安全策略，現在需要這么做了
// 這段代碼是網上復制下來的，想深入理解的可以百度搜搜 “C:\fakepath\”
if (window.createObjcectURL != undefined) {
imgPath = window.createOjcectURL(file);
} else if (window.URL != undefined) {
imgPath = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
imgPath = window.webkitURL.createObjectURL(file);
}
// 設置畫布背景，并刷新畫布
canvas.setBackgroundImage(
imgPath,
canvas.renderAll.bind(canvas)
)
}
// 保存畫布
function saveCanvas() {
let data = canvas.toJSON()
console.log(data)
}
window.onload = function() {
initCanvas()
}
</script>上面的實現方式，如果是在純前端的環境下，保存時背景圖是地址是本地地址( "blob:http://127.0.0.1:5500/383e7860-3fa5-43b9-92d9-e7165760e60b" )。
這樣其實不是很好，如果在別的電腦想通過 反序列化 渲染出來的時候，可能會出現一點問題。
如果純前端實現的方式，可以將圖片轉成 base64 再生成背景圖。
fabric.Image.fromURL(
imgPath, // 真實圖片地址
img => {
// 將圖片設置再畫布上，然后重新渲染畫布，圖片就出來了。
canvas.setBackgroundImage(
img, // 要設置的圖片
canvas.renderAll.bind(canvas) // 重新渲染畫布
)
}
)我使用了 vue3 + element-plus 。
實現邏輯和原生方法一樣。 唯一不同的是本例用了 el-upload 這個組件。 我將圖片文件轉成 base64 再放進畫布。
<template>
<div>
<div class="btn__x">
<!-- 上傳組件 -->
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:multiple="false"
:show-file-list="false"
:limit="1"
accept=".jpg,.png"
:before-upload="onProgress"
>
<el-button type="primary">上傳</el-button>
</el-upload>
<!-- 保存按鈕（序列化） -->
<el-button @click="saveCanvas">保存：打開控制臺查看</el-button>
</div>
<!-- 畫布 -->
<canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { fabric } from 'fabric'
const store = useStore()
// 畫布
let canvas = null
// 上傳
function onProgress(file) {
// 拿圖片文件
const reader = new FileReader()
reader.readAsDataURL(file)
// 圖片文件完全拿到后執行
reader.onload = () => {
// 轉換成base64格式
const base64Img = reader.result
// 將base64圖片設置成背景
canvas.setBackgroundImage(
base64Img,
canvas.renderAll.bind(canvas) // 刷新畫布
)
}
return false
}
// 初始化畫布
function init() {
canvas = new fabric.Canvas('canvas')
}
// 保存
function saveCanvas() {
console.log(canvas.toJSON())
}
// 頁面加載完成后，初始化畫布
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.btn__x {
display: flex;
.el-button {
margin-right: 20px;
}
}
</style>在正式的項目開發中，上面兩種情況出現的概率應該不多（除非你的后端伙伴是個懶人）
先說說上面兩種情況存在的問題：
這種情況放到服務器可能沒什么用的。 127.0.0.1 是你本機的，你上傳的圖片在別人的電腦可能無法查看。
這種情況雖然問題不大，但 backgroundImage.src 的值有點大。
我在項目中的做法：
這樣做的好處是 backgroundImage.src 的值變短了。
在正式項目中，你可能還要考慮到背景圖的大小和畫布大小不匹配問題。 你可以參考 《Fabric.js 從入門到膨脹》 中 “拉伸背景圖” 這小節。
原生方式實現：https://gitee.com/k21vin/fabricjs-demo/blob/master/demos/UploadImg/index.html
在 Vue3+Element-plus 中實現：https://gitee.com/k21vin/front-end-data-visualization/blob/master/src/views/FabricJS/Demo/pages/UploadImg/UploadImg.vue
者：政采云前端團隊
轉發鏈接：https://juejin.im/post/5ea574cc518825736e57fcca
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
