Question

目前我使用php收集数据需要在一个pdf中打印并在新的浏览器选项卡中打开pdf。问题是，只要我有很多用户和很多文档同时打印，就会产生大量流量。因此，我正在寻找一种方法来收集一个html中的所有内容，在新标签中打开它，从后端填充数据并在之后打印。我的问题是为新的浏览器选项卡初始化VueJS。我总是在控制台中发出以下警告： vue.js：1141 [Vue警告]：找不到元素：#app

我想原因是VueJS适用于SPA。有没有办法实现我的想法？

以下是需要在新标签页中打开新标签页的模板。

<div id="app">
 <printing-form v-for="printedForm in printedForms" track-by="id" :printed-form="printedForm"></printing-form>
</div>

<template id="printingForm-template">
  Some HTML need to be printed in new tab.
</template>

我的JS代码下面是init VueJS

  var printButton = $('#print-button');
  printButton.on('click', function(e) {
    e.preventDefault();
    printButton.unbind('click');
    printButton.css('color', '#008000');
    var idNumbers = TopPanel.getArrayOfId();
    if (idNumbers == '') {
      idNumbers = TopPanel.getIdNumber();
    }
    var url = window.location.href + '/form';

    $.ajax({
     url: url,
     data: 'id=[' + idNumbers + ']',
     success: function(data) {
       var newWindow = window.open(url); //Open URL in new tab
       var printedIds = $.parseJSON('[' + idNumbers + ']');
       printedIds.forEach(function(item, i, arr) {
         var printedField = $('#top-row-'+item).find('.table-field-printed');
         if (!printedField.hasClass('true-value')) {
             printedField.addClass('fa');
             printedField.addClass('fa-check');
             printedField.addClass('true-value');
         }
       });
       printButton.css('color', '#4f5762');
       printButtonInit();
       newWindow.onload = function() {
        VuePrinting.vueInit(newWindow); //Here I initialize VueJS module
       }
     },
     error: function(xhr, textStatus, errorThrown) {
      alert($.parseJSON(xhr.responseText));
      printButton.css('color', '#4f5762');
      printButtonInit();
     },
   });
 });
 }

VueJs的单独模块

  var VuePrinting = (function() {
  return {
   vueInit: function() {
    Vue.component('printingForm', {
     temlate: newWindow.document.getElementById('printingForm-template')
    });

    var vm = new Vue({
     el: newWindow.document.getElementById('app'),
     data: {
       printedForms: [
         { obj1 },
         { obj3 },
         { obj3 }
        ]
      }
     });
    }
  }
 })();

更新：我在RoyJ发表评论后更正了我的代码，所以现在它的工作正确。只有一个音符...模板也应该从选择器更改为：

newWindow.document.getElementById('printingForm-template')

Answer 1

当您为el指定选择器时，Vue会在当前文档中查找它。新标签不会成为当前文档的一部分。

Save a reference when you open the tab。 Write the HTML into its document。查询文档中的#app，并在Vue设置中使用实际元素而不是选择器：

var vm = new Vue({
  el: newWindow.document.getElementById('app')
});

打开新选项卡后初始化VueJs

1 个答案: