vue中將頁面列印成pdf檔案以及遇到的

2022-07-07 17:30:15 字數 1902 閱讀 5544

很常見的會遇到列印pdf的操作

我使用的是print.js

使用方法如下:

//

列印類屬性、方法定義

/*eslint-disable

*/const print =function(dom, options) , options);

if ((typeof dom) === "

string

")

else

this

.init();

};print.prototype =,

extend: function (obj, obj2)

return

obj;

},getstyle: function ()

str += "";

return

str;

},gethtml: function ()

else

} else

if (inputs[k].type == "

text")

}for (var k2 in

textareas)

}for (var k3 in

selects)

else}}

}}

return

this

.dom.outerhtml;

},writeiframe: function (content) ,

500)

},toprint: function (framewindow)

} catch

(e)

framewindow.close();

}, 10);

} catch

(err)

},isdom: (

typeof htmlelement === '

object

') ?function (obj) :

function (obj)

};const myplugin ={}

myplugin.install =function (vue, options)

export

default myplugin

以上**是print.js的全部內容,

在需要列印的頁面引入,如下**

import vue from

'vue

'import print

from

'./print

'vue.use(print)

列印操作時:

"

print(record)

">列印處方單

print()

執行以上**即可執行列印操作。需要注意的是,若想成功列印檔案,需要在ref為prescription的外邊包一層div,否則預覽時,將會看到空白頁面。

下邊來說還可能出現的問題:

預覽時會發現樣式亂掉了,那麼該怎麼辦呢

你可以將css**放在@media print{}裡面

@media print

}

也可以使用引入的方法

@media print {

@import url(

'./prescription.css

');//你的css路徑

但是,很快你會發現可能不生效,原因是你在使用print.js時安裝了vue-print-nb,而在使用過程中不允許要列印的元素存在父級元素,所以,我們剛才為了使列印的檔案能夠預覽還包了乙個div在外邊。

那麼我們該怎麼辦?怎麼辦?

解決辦法就是:還是老老實實把這個頁面的樣式寫成行內式才算完美解決問題。

vue 專案 頁面顯示 pdf

背景 vue專案裡需要在頁面顯示pdf 實現方法 外掛程式位址 1.install 外掛程式 npm i vue pdf 複製 2.在頁面引入 import pdf from vue pdf 複製 3.在template中新增 projects store.state.projectid resul...

Ubuntu列印到pdf檔案

由於ubuntu使用的列印系統也是cups common uinx print system 所以這種列印到pdf檔案的方法基本上對所有unix like系統是通用的。首先需要安裝cups pdf包,這個簡單 apt get install cups pdf 然後再修改一下這個檔案的執行許可權 ch...

pdf怎樣調節列印的頁面大小

pdf調節列印的頁面大小方法 首先點選 檔案 按鈕,並在下拉列表中點選 列印 按鈕 接著選擇 屬性 中的 布局 並根據需要調整縮放比例 最後選擇列印範圍,點選 確定 即可。pdf調節列印的頁面大小方法 1 第一步 開啟我們需要列印的pdf檔案。2 然後找到pdf右上角的 檔案 按鈕。3 在下拉列表中...