vue之引入js檔案列印

2021-10-18 22:46:11 字數 1981 閱讀 1165

1、在src目錄下面建立plugs/print.js檔案儲存外掛程式內容,其他位置也可

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"

)else

}for

(var k2 =

0; k2 < textareas.length; k2++)}

for(var k3 =

0; k3 < selects.length; k3++

)else}}

}}return

this

.dom.outerhtml;},

writeiframe: function (content)

,100)}

},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

2、main.js中引入外掛程式

3、vue檔案中使用

="show"

>

這是展示的需要列印的內容,給使用者看的。

<

/div>

"print"

class

="recordimg" id=

"tab_base"

>

這裡是需要列印的內容,出現在列印預覽的介面,這裡的樣式需要寫在 @media print 裡面 如果需要設定預覽頁規則,頁尾等樣式 @page

="no-print"

>不需要列印的內容<

/div>

="do-not-print-div"

>不要列印我<

/div>

"printcontext"

>列印<

/button>

<

/div>

...... method:

)//或 (這兩種寫法都可以)

//this.$print(this.$refs.print)

}// 不列印方法1. 新增no-print樣式類

// 不列印方法2. this.$print(this.$refs.print,)

}<

/script>

vue 引入原生js vue引入靜態js檔案的方法

由於一些演示,需要對編碼名稱等可快速進行修改,需要頁面方便配置。由於build後的vue專案基本已經看不出原樣,因此需要建立乙個檔案,並在打包的時候不會進行編譯。vue cli 2.0的作法是在static檔案下建立js。vue cli 3.0 的寫法則是直接在public資料夾下建立js 具體操作...

Vue中引入外部的js檔案

在使用threejs的時候,我需要用到乙個transformsvgpath 函式,這個函式是別人寫好了的。function transformsvgpath 我想用import的方法在vue元件中使用這個函式。1.引入乙個函式function transformsvgpath export 在需要引...

vue引入自己寫的js檔案

話不多說,直接上 呀 先來個結構圖 中規中矩的vue cli就寫了乙個自己的js檔案 那麼我想要引入到vue元件裡。1.首先寫我的js檔案 2.引入到vue元件!一定要用 把方法名拿過來 3.可以開心使用了 關於引入第三方外掛程式 簡單的說一下三種方式 一.可以cdn直接引入到index.html裡...