❶ 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
希望回答能够对你有所帮助。