Слияние кода завершено, страница обновится автоматически
Реализация предварительного просмотра PDF в проекте на vue-cli#### Инструкция по установке
npm install --save vue-pdf
import pdf from "vue-pdf"
components: {pdf}, и используйте его: <pdf :src="url"></pdf>
url может быть относительным или абсолютным путем, base64 и т. д.<template>
<pdf :src="url"></pdf>
</template>
<script>
import pdf from "vue-pdf";
export default {
components: {
pdf
},
data () {
return {
```url:'data:application/pdf;base64,JVBERi0xLjUKJbXtrvsKMyAwIG9iago8PCAvTGVuZ3RoIDQgMCBSCiAgIC9GaWx0ZXIgL0ZsYXRlRGVjb2RlCj4+CnN0cmVhbQp4nE2NuwoCQQxF+/mK+wMbk5lkHl+wIFislmIhPhYEi10Lf9/MVgZCAufmZAkMppJ6+ZLUuFWsM3ZXxvzpFNaMYjEriqpCtbZSBOsDzw0zjqPHZYtTrEmz4eto7/0K54t7GfegOGCBbBdDH3+y2zsMsVERc9SoRkXORqKGJupS6/9OmMIUfgypJL4KZW5kc3RyZWFtCmVuZG9iago0IDAgb2JqCiAgIDEzOAplbmRvYmoKMjAwIG9iago8PCAvRXh0R1N0YXRlIDw8CiAgICAgIC9hMCA8PCAvQ0EgMC42MTE5ODcgL2NhIDAuNjExOTg3ID4+CiAgICAgIC9hMSA8PCAvQ0EgMSAvY2EgMSA+PgogICA+Pgo+PgplbmRvYmoKNSAwIG9iago8PCAvVHlwZSAvUGFnZQogICAvUGFyZW50IDEgMCBSCiAgIC9NZWRpYUJveCBbIDAgMCA1OTUuMjc1NTc0IDg0MS44ODk3NzEgXQogICAvQ29udGVudHMgMyAwIFIKICAgL0dyb3VwIDw8CiAgICAgIC9UeXBlIC9Hcm91cAogICAgICAvUyAvVHJhbnNwYXJlbmN5CiAgICAgIC9DUyAvRGV2aWNlUkdCCiAgID4+CiAgIC9SZXNvdXJjZXMgMiAwIFIKPj4KZW5kb2JqCjEgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzCiAgIC9LaWRzIFsgNSAwIFIgXQogICAvQ291bnQgMQo+PgplbmRvYmoKNjAwIG9iago8PCAvQ3JlYXRvciAoY2Fpcm8gMS4xMS4yIChodHRwOi8vY2Fpcm9ncmFwaGljcy5vcmcpKQogICAvUHJvZHVjZXIgKGNhaXJvIDEuMTEuMiAoaHR0cDovL2NhaXJvZ3JhcGhpY3Mub3JnKSkKPj4KZW5kb2JqCjcwMDAgb2JqCiPDpiAvVHlwZSAvQ2F0ZWxvZwogICAvUGFyZW50IDEgMCBSCiAgIC9JbW1pbiA4IDAgUgogICAgL0xlZnQgMTIgMCBSCiAgIC9Gb250IDEyIDAgUgogICAgL0xhbmcgMTIgMCBSCiAgIC9TdGFydCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCAxIDAgUgogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdCBbIDAgMCAxMjAgXQogICAgL1N0cmVyc2hvdодиночной страницы работает хорошо, но для отображения пагинации требуется самостоятельная настройка.Если в проекте нужно отображать одиночные документы, такие как счета, этот метод прост и эффективен.
Здесь есть подробная документация: https://www.npmjs.com/package/vue-pdf.
Пожалуйста, обратитесь к нему.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )