I want to use vue-pdf to preview online pdf file. But I always got blank page and there is no error message on console. My code is
<template>
<div class="pdf">
<pdf
:src="src">
</pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
name: 'Pdf',
components:{
pdf
},
data(){
return {
src:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
}
},
mounted() {
this.src = pdf.createLoadingTask(this.src)
this.src.then(response => {
this.numPages = response.numPages
})
}
}
</script>
vue version: 2.9.6
vue-pdf version: 4.0.6
Do not re-assign variable src. Your onmounted function is re-assigning src to something else just change it to:-
.....
data(){
return {
src:"http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf",
newsrc: null,
}
},
.................
........your code..............
........................
mounted() {
this.newsrc = pdf.createLoadingTask(this.src)
this.newsrc.then(response => {
this.numPages = response.numPages
})
}
Related
Hi to all i want to find a way to see if user in my webapp is online or offline and run always! If user is offline wait 10 seconds to see if come back online and if not run a function!
Thanks all for the help!
Create a component OfflineComponent.vue like this:
<template>
<div>Offline component after 5 seconds!</div>
</template>
<script>
export default {
data() {
return {
showOnce: false,
}
},
mounted() {
this.startInterval()
},
methods: {
startInterval() {
window.setInterval(() => {
if (this.$nuxt.isOffline && !this.showOnce) {
this.runThisFunc()
this.showOnce = true
}
if (this.showOnce) {
clearInterval(window)
}
}, 5000)
},
runThisFunc() {
console.log('OFFLINE!')
},
},
}
</script>
Now import it inside the page you want. I use the main page:
<template>
<div v-if="$nuxt.isOffline">
<offline-component></offline-component>
</div>
<div v-else>You are Online!</div>
</template>
<script>
import OfflineComponent from '~/components/offlineComponent.vue'
export default {
name: 'IndexPage',
components: {
OfflineComponent,
},
}
</script>
I have started using ckeditor4-vue
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#using-the-component-locally
<template>
<div>
<ckeditor
v-model="formData"
:config="editorConfig"
#input="$emit('update:editorData', formData)"
></ckeditor>
</div>
</template>
<script>
import CKEditor from 'ckeditor4-vue';
export default {
components: {
ckeditor: CKEditor.component
},
props: ['editorData'],
data() {
return {
formData: this.editorData,
editorConfig: {}
};
},
mounted() {
CKEDITOR.disableAutoInline = true;
}
};
</script>
However I can't find how I can use CKEDITOR, in this example, I have CKEDITOR is not defined.
Thank you
make sure you're calling it the right way, CKEDITOR <> CKEditor.
try removing your mounted and this should works
I am beginner of Vue.js.
I am trying to use a plugin called vue-base64-file-upload in a single component in VueCLI. However, it doesn't work in index.vue...
I have just changed the example (https://github.com/dhhb/vue-base64-file-upload) to this.
<template>
<div class="container">
<h2>Upload file</h2>
<vue-base64-file-upload
class="v1"
accept="image/png,image/jpeg"
image-class="v1-image"
input-class="v1-input"
:max-size="customImageMaxSize"
#size-exceeded="onSizeExceeded"
#file="onFile"
#load="onLoad" />
</div>
</template>
<script>
import VueBase64FileUpload from 'vue-base64-file-upload';
export default {
data () {
return {
customImageMaxSize: 3 // megabytes
};
},
components: {
VueBase64FileUpload
},
methods: {
onFile(file) {
console.log(file); // file object
},
onLoad(dataUri) {
console.log(dataUri); // data-uri string
},
onSizeExceeded(size) {
alert(`Image ${size}Mb size exceeds limits of
${this.customImageMaxSize}Mb!`);
}
},
};
app.$mount('#app');
I've created a vuejs library with some components that could be used in many project.
In that library, I've got a component which can load svg files to be used inline in html (svg-icon).
It work great.
But in this same library, I've got another component which use svg-icon with a svg image stored in the library.
An import point, I'd like to use this library (node module) with an npm link
Which is the good way to give the path of the svg image, or where to store it?
I've tried a lot of different paths, but none of them is working...
This is my svg-icon component:
<template>
<component :is="component"></component>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
icon: {
type: String,
required: true
}
},
data () {
return {
component: null
}
},
watch: {
icon: () => {
this.load()
}
},
computed: {
loader () {
return () => import(this.icon)
}
},
methods: {
load () {
this.loader().then(() => {
this.component = () => this.loader()
})
}
},
mounted () {
this.load()
}
}
</script>
And this is the component which use svg-icon (the svg image is in the same folder actually) :
<template>
<svg-icon icon="~my-module/components/media/no-image.svg"></svg-icon>
<svg-icon icon="./no-image.svg"></svg-icon>
</template>
<script>
import SvgIcon from '../svg-icon/SvgIcon'
export default {
components: {
SvgIcon
}
}
</script>
I always got this errors:
Cannot find module '~my-module/components/media/no-image.svg'
Cannot find module './no-image.svg'
Which is the good path in that situation? Or should I put the svg file somewhere else? (I'd like to keep it in the library)
I've created a CodeSandbox here
SvgIcon.vue
<template>
<span v-html="icon"></span>
</template>
<script>
export default {
name: "SvgIcon",
props: {
icon: {
type: String,
required: true
}
}
};
</script>
HelloWorld.vue
//Usage
<template>
<svg-icon :icon="AlertIcon"></svg-icon>
</template>
<script>
import AlertIcon from "../assets/alert.svg";
import SvgIcon from "./SvgIcon";
export default {
data() {
return { AlertIcon };
},
components: {
SvgIcon
}
};
</script>
I've made some changes to your components.
You need to import the image and pass it to your component because dynamic import causes complications when it comes to the absolute paths.
I've removed some unnecessary fields from your SvgIcon code.
Hope this helps.
When I try to update my custom text-area component's model data this.message='<span id="foo">bar</span> the text and html does not display in the htmltextarea tag like it should, but I can see the update applied in the Vue dev tool's console. I've also tried switching to an object instead of a string and using Vue.set, but this does not work either.
Any suggestions on how to fix this?
The goal with the htmlTextArea component is to get the users text from the htmlTextArea tag (this works), manipulate this text and bind it back to the textarea, but with HTML in it.
Custom text-area component:
<template>
<div contenteditable="true" #input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
// Custom textarea
name: 'htmlTextArea',
props:['value'],
mounted: function () {
this.$el.innerHTML = this.value;
},
methods: {
updateHTML: function(e) {
this.$emit('input', e.target.innerHTML);
}
}
}
</script>
Other component:
<template>
...
<htmlTextArea id="textarea" v-model="message"></htmlTextArea>
...
</template>
<script>
data: {
return {
message: 'something'//this works
}
}
...
methods: {
changeText() {
this.message='<span id="foo">bar</span>'//this does not
}
},
components: {
htmlTextArea
}
</script>
You need to set the value explicitly after the value props change. you can watch for value change.
<template>
<div contenteditable="true" #input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
// Custom textarea
name: "htmlTextArea",
props: ["value"],
mounted: function() {
this.$el.innerHTML = this.value;
},
watch: {
value(v) {
this.$el.innerHTML = v;
}
},
methods: {
updateHTML: function(e) {
this.$emit("input", e.target.innerHTML);
}
}
};
</script>
Change the data property into a function, as you have it defined it is not reactive.
data () {
return {
message: 'something'//this works
}
}
Now when you update the message property in your method, the component will update accordingly.
Reactivity in depth