vue 導(dǎo)出pdf 親測有效 有問題私信

1,npm i html2canvas jspdf --save-dev

2,div部分

<template>

<div class="pdf-demo">

<button @click="handleDown">jsPDF方式下載</button>

</div>

</template>

3场仲,新建js部分htmlToPdf.js?文件 以下全部復(fù)制進去

import html2canvas from 'html2canvas';

import JsPDF from 'jspdf';

/**

* @param? ele? ? ? ? ? 要生成 pdf 的DOM元素(容器)

* @param? padfName? ? PDF文件生成后的文件名字

* */

function downloadPDF(ele, pdfName){

? ? let eleW = ele.offsetWidth;// 獲得該容器的寬

? ? let eleH = ele.offsetHeight;// 獲得該容器的高

? ? let eleOffsetTop = ele.offsetTop;? // 獲得該容器到文檔頂部的距離

? ? let eleOffsetLeft = ele.offsetLeft; // 獲得該容器到文檔最左的距離

? ? var canvas = document.createElement("canvas");

? ? var abs = 0;

? ? let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 獲得當前可視窗口的寬度(不包含滾動條)

? ? let win_out = window.innerWidth; // 獲得當前窗口的寬度(包含滾動條)

? ? if(win_out>win_in){

? ? ? ? // abs = (win_o - win_i)/2;? ? // 獲得滾動條長度的一半

? ? ? ? abs = (win_out - win_in)/2;? ? // 獲得滾動條寬度的一半

? ? ? ? // console.log(a, '新abs');

? ? }

? ? canvas.width = eleW * 2;? ? // 將畫布寬&&高放大兩倍

? ? canvas.height = eleH * 2;

? ? var context = canvas.getContext("2d");

? ? context.scale(2, 2);

? ? context.translate(-eleOffsetLeft -abs, -eleOffsetTop);

? ? // 這里默認橫向沒有滾動條的情況橄唬,因為offset.left(),有無滾動條的時候存在差值,因此

? ? // translate的時候耙厚,要把這個差值去掉

? ? // html2canvas(element).then( (canvas)=>{ //報錯

? ? // html2canvas(element[0]).then( (canvas)=>{

? ? html2canvas( ele, {

? ? ? ? dpi: 300,

? ? ? ? // allowTaint: true,? //允許 canvas 污染强挫, allowTaint參數(shù)要去掉,否則是無法通過toDataURL導(dǎo)出canvas數(shù)據(jù)的

? ? ? ? useCORS:true? //允許canvas畫布內(nèi) 可以跨域請求外部鏈接圖片, 允許跨域請求颜曾。

? ? } ).then( (canvas)=>{

? ? ? ? var contentWidth = canvas.width;

? ? ? ? var contentHeight = canvas.height;

? ? ? ? //一頁pdf顯示html頁面生成的canvas高度;

? ? ? ? var pageHeight = contentWidth / 592.28 * 841.89;

? ? ? ? //未生成pdf的html頁面高度

? ? ? ? var leftHeight = contentHeight;

? ? ? ? //頁面偏移

? ? ? ? var position = 0;

? ? ? ? //a4紙的尺寸[595.28,841.89]纠拔,html頁面生成的canvas在pdf中圖片的寬高

? ? ? ? var imgWidth = 595.28;

? ? ? ? var imgHeight = 595.28/contentWidth * contentHeight;

? ? ? ? var pageData = canvas.toDataURL('image/jpeg', 1.0);

? ? ? ? var pdf = new JsPDF('', 'pt', 'a4');

? ? ? ? //有兩個高度需要區(qū)分,一個是html頁面的實際高度泛豪,和生成pdf的頁面高度(841.89)

? ? ? ? //當內(nèi)容未超過pdf一頁顯示的范圍稠诲,無需分頁

? ? ? ? if (leftHeight < pageHeight) {

? ? ? ? ? ? //在pdf.addImage(pageData, 'JPEG', 左,上诡曙,寬度臀叙,高度)設(shè)置在pdf中顯示;

? ? ? ? ? ? pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);

? ? ? ? ? ? // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);

? ? ? ? } else {? ? // 分頁

? ? ? ? ? ? while(leftHeight > 0) {

? ? ? ? ? ? ? ? pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);

? ? ? ? ? ? ? ? leftHeight -= pageHeight;

? ? ? ? ? ? ? ? position -= 841.89;

? ? ? ? ? ? ? ? //避免添加空白頁

? ? ? ? ? ? ? ? if(leftHeight > 0) {

? ? ? ? ? ? ? ? ? ? pdf.addPage();

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? //可動態(tài)生成

? ? ? ? pdf.save(pdfName);

? ? })

}

export default {

? ? downloadPDF

}

4价卤,引入 新建的htmlToPdf.js?

import htmlToPdffrom '../../../libs/htmlToPdf'

5劝萤,vue 調(diào)用方法部分?

methods: {

? ? ? ? ? ? handleDown(){

? ? ? ? ? ? ? ? //導(dǎo)出PDF

htmlToPdf.downloadPDF( document.querySelector('#demo'),'我的PDF');

? ? ? ? ? ? },

? ? ? ? }? ?

就是這么簡答??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市慎璧,隨后出現(xiàn)的幾起案子床嫌,更是在濱河造成了極大的恐慌跨释,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件厌处,死亡現(xiàn)場離奇詭異鳖谈,居然都是意外死亡,警方通過查閱死者的電腦和手機阔涉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門缆娃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瑰排,你說我怎么就攤上這事贯要。” “怎么了椭住?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵崇渗,是天一觀的道長。 經(jīng)常有香客問我函荣,道長显押,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任傻挂,我火速辦了婚禮乘碑,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘金拒。我一直安慰自己兽肤,他們只是感情好,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布绪抛。 她就那樣靜靜地躺著资铡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪幢码。 梳的紋絲不亂的頭發(fā)上笤休,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機與錄音症副,去河邊找鬼店雅。 笑死,一個胖子當著我的面吹牛贞铣,可吹牛的內(nèi)容都是我干的闹啦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼辕坝,長吁一口氣:“原來是場噩夢啊……” “哼窍奋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤琳袄,失蹤者是張志新(化名)和其女友劉穎江场,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挚歧,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡扛稽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年吁峻,在試婚紗的時候發(fā)現(xiàn)自己被綠了滑负。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡矮慕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出啄骇,到底是詐尸還是另有隱情痴鳄,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布缸夹,位于F島的核電站痪寻,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏虽惭。R本人自食惡果不足惜橡类,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望芽唇。 院中可真熱鬧顾画,春花似錦、人聲如沸匆笤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽炮捧。三九已至庶诡,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間咆课,已是汗流浹背末誓。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留傀蚌,地道東北人基显。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像善炫,于是被迫代替她去往敵國和親撩幽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354