❶ vue-pdf.js 在線預覽問題
最近修改公司vue項目中使用pdf.js來實現在線預覽上傳的各類文件.由於使用pdf.js在預覽時是直接在標簽內將src屬性賦值為要請求的地址.這就導致一個問題,會直接請求伺服器的文件路徑地址,而這個伺服器文件路徑就會暴露出來。處於安全性考慮在預覽請求時不再返回地址,改為通過調用普通介面,而是統一返迴流(word,pdf)或者base64(jpg,png...)。.前端再進行解析並實現在線預覽.
此時遇到第一個問題:
這個請求是在插件中進行的無法攜帶項目中封裝的各類請求頭信息(token..等)。 翻看pdf.js源碼及網上總結.發現一個底層方法
該方法可傳一個對象作為參數,對象內可以添加url(所請求的介面),headers(請求頭信息)等.... . 有了這個方法就好處理了.
最後在將該方法當做變數賦值給pdf的src.大功告成.
最後再補充一些 : @loaded="docLoaded" @page-loaded ="pageLoaded" 這兩個方法為載入預覽文件時的loading事件,
最後引一波示例,
❷ vuepdf支持目錄嗎
vue引入pdf.js來引入pdf文件
首先下載文件放在static裡面並且命名為pdf
之後可以自己寫組件,我是在pages裡面添加了pdf文件夾,再添加兩個文件,需要注意路勁,其他也沒什麼需要更改的地方
❸ vue.js的優點體現在哪些地方
vue.js優勢介紹:
漸進式構建能力是vue.js最大的優勢,vue 有一個簡潔而且合理的架構,使得它易於理解和構建。
vue 有一個強大的充滿激情人群的社區,這為vue.js增加了巨大的價值,使得為一個空白項目創建一個綜合的解決方案變得十分容易。
缺點介紹:
在模型-視圖應用程序和狀態容器類型的應用程序之間的互相轉換可能會令人感到困惑,即使沒有完美包含一個模式到另一個模式的完美轉換,但讓人感覺希望能維持兩個模式的相關性。對於那些期待vue.js完美解決方案,並可能導致難以維護不一致的應用程序的人來說,這至少是令人困惑的。
一個更大的挑戰是vue.js依賴於一個單獨的人,很明顯,其他的項目基本是由一個組織提供支持,但這讓人感覺更加有意義,雖然它有一個強大文件的社區和許多有創新的新增項目,但是 vue 核心的開發基本落在一個人身上。
我們很高興看到 vue 更加容易接受新興的標准方法,但是它的類似於 Web 組件的模式,而不是真正的 Web 組件,這可能是 vue 所得不償失的地方。
發展前景:
雖然vue.js有相當廣泛的應用,但也很難預測在中期發展中這個勢頭能持續多久,它不是由一個商業組織直接支持並維護,因此,這很大程度上依賴於維護者的生存能力和繼續維護下去的願望來決定。
它也表現出了一定程度的語言適應能力,並且隨著某些模式的落伍和失寵而繼續保持自身語言的現代化和時代性,目前沒有跡象表明vue.js架構將來無法適應進一步發展。
使用場景:
如果你有一個傳統的Web應用程序,並需要一個強壯穩健的應用程序層,那麼vue.js 可能是一個很好的選擇,它有清晰的模式,即使沒有經驗的團隊也能正確或者錯誤的使用它。盡管vue UX框架沒有開箱即用的功能,但在vue.js上也能大量持續性構建應用,這將有利於你的項目。
❹ vue 移動端下載pdf的流文件,很多瀏覽器不支持,有什麼好的方案么
以前用過一個叫pdf.js的插件,你可以查查。
部分是pdf.js和pdf.worker.js,一個負責API解析,一個負責核心解析
❺ 如何在 Vue.js 中使用第三方庫
在項目中添加第三方庫的最簡單方式是講其作為一個全局變數, 掛載到 window 對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
這種方式不適合於服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.
在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導入:
MyComponent.vue
import _ from 'lodash';
export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
這種方式是允許的, 但是比較繁瑣, 並且帶來的問題是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件並刪除該庫的引用. 如果構建工具沒設置正確, 可能導致該庫的多份拷貝被引用.
優雅的方式
在 Vuejs 項目中使用 JavaScript 庫的一個優雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:
entry.js
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
由於所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變數或者手動的引入.
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}
接下來就了解下這種方式的工作原理.
Object.defineProperty
一般而言, 可以按照下面的方式來給對象設置屬性:
Vue.prototype.$moment = moment;
可以這樣做, 但是 Object.defineProperty 允許我們通過一個 descriptor 來定義屬性. Descriptor 運行我們去設置對象屬性的一些底層(low-level)細節, 如是否允許屬性可寫? 是否允許屬性在 for 循環中被遍歷.
通常, 我們不會為此感到困擾, 因為大部分時候, 對於屬性賦值, 我們不需要考慮這樣的細節. 但這有一個明顯的優點: 通過 descriptor 創建的屬性默認是只讀的.
這就意味著, 一些處於迷糊狀態的(coffee-deprived)開發者不能在組件內去做一些很愚蠢的事情, 就像這樣:
this.$http = 'Assign some random thing to the instance method';
this.$http.get('/'); // TypeError: this.$http.get is not a function
此外, 試圖給只讀實例的方法重新賦值會得到 TypeError: Cannot assign to read only property 的錯誤.
$
你可能會注意到, 代理第三庫的屬性會有一個 $ 前綴, 也可能看到其它類似 $refs, $on, $mount 的屬性和方式, 它們也有這個前綴.
這個不是強制要求, 給屬性添加 $ 前綴是提供那些處於迷糊狀態(coffee-deprived)的開發者這是一個公開的 API, 和 Vuejs 的一些內部屬性和方法區分開來.
this
你還可能注意到, 在組件內是通過 this.libraryName 的方式來使用第三方庫的, 當你知道它是一個實例方法時就不會感到意外了. 但與全局變數不同, 通過 this 來使用第三方庫時, 必須確保 this 處於正確的作用域. 在回調方法中 this 的作用域會有不同, 但箭頭式回調風格能保證 this 的作用域是正確的:
this.$http.get('/').then(res => {
if (res.status !== 200) {
this.$http.get('/') // etc
// Only works in a fat arrow callback.
}
});
插件
如果你想在多個項目中使用同一個庫, 或者想將其分享給其他人, 可以將其寫成一個插件:
import MyLibraryPlugin from 'my-library-plugin';
Vue.use(MyLibraryPlugin);
在應用的入口引入插件之後, 就可以在任何一個組件內像使用 Vue Router, Vuex 一樣使用你定義的庫了.
寫一個插件
首先, 創建一個文件用於編寫自己的插件. 在示例中, 我會將 Axios 作為插件添加到項目中, 因而我給文件起名為 axios.js. 其次, 插件要對外暴露一個 install 方法, 該方法的第一個參數是 Vue 的構造函數:
axios.js
import axios from 'axios';
export default {
install: function(Vue,) {
Object.defineProperty(Vue.prototype, '$http', { value: axios });
}
}
最後, 利用 Vue 的實例方法 use 將插件添加到項目中:
entry.js
import AxiosPlugin from './axios.js';
Vue.use(AxiosPlugin);
new Vue({
created() {
console.log(this.$http ? 'Axios works!' : 'Uh oh..');
}
})
❻ vue.js是什麼
Vue.js:(讀音 /vjuː/, 類似於 view)是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易於上手,還便於與第三方庫或既有項目整合。
ue.js 是一個用於創建 web 交互界面的。其特點是
1.簡潔 HTML 模板 + JSON 數據,再創建一個 Vue 實例,就這么簡單。
2.數據驅動 自動追蹤依賴的模板表達式和計算屬性。
3.組件化 用解耦、可復用的組件來構造界面。
4.輕量 ~24kb min+gzip,無依賴。
5.快速 精確有效的非同步批量 DOM 更新。
6.模塊友好 通過 NPM 或 Bower 安裝,無縫融入你的工作流。
vue壓縮後的js可以反編譯出來,反編譯方法為:
1、在桌面找到自己下載的瀏覽器軟體,點擊瀏覽器圖標。
❽ vue.js怎麼設置pdf為橫向還是縱向
修改PDF文字或者編輯文字,
修改圖片的話建議使用捷速PDF編輯器。
頁面也是可以修改方向的,首先安裝下這個軟體。
然後選擇軟體左上角的文件後,在下來欄中打開需要編輯的PDF文件
需要修改的pdf頁面,然後選定需要修改的對象,再通過軟體上方的各種修改按鈕進行修改即可。
❾ 使用Vue.js有哪些注意事項
一、當頁面使用滾動組件時,在移動端觸發點擊事件,需單獨設置
二、當在一個組件中使用 未定義對象屬性 時,首次使用需通過set方法聲明。
三、當設置動畫時,注意書寫單位,勿漏掉px
四、操作對象不要搞錯,比如if中為ball.show,而不是ball
❿ 製作報告頁面,裡面有各種信息,底部有SHEET頁,如何使用VUE將所有SHEET頁上的內容導出為PDF和PPT
推測你是想用前端VUE框架去做一個類似Excel的電子表格,並且支持導出PDF和PPT的功能。
推薦你一款控制項叫做SpreadJS,SpreadJS本身就是一款純前端(純JS編寫)的類Excel控制項,本身支持目前前端的流行框架VUE,React,Angular,並且控制項本身自帶導出PDF功能,可以直接使用。在系統工程中電子表格這塊的模塊完全可以使用這款控制項來進行開發,並且可以和你系統的其他功能完美兼容。
控制項本身就是電子表格並且支持多個Sheet
希望回答能夠對你有所幫助。